---
title: "Navigation Bar"
canonical: https://sky-ui.cf.sky.com/components/navigation-bar
---

# Navigation Bar

NavBar is used for page navigation, or anchor links within the page.

## Purpose

The Navigation Bar is used for

- Page navigation (directing users to a different page)
- In-page navigation via anchor links (moving to a different section on the current page)
- As a Tab-style component to conditionally render content (this is a development specific requirement).

**Note:** The Navigation Bar and the [`Tabs component`](/components/tabs/) look
  identical, but are semantically different and serve different purposes.

## Anatomy

The component can be broken down into the following elements -

## Variants & States

- Breakpoint: Mobile, Desktop
- # of Links: 2-6
- Content overflow: off/on
- OnScroll: off/on

The NavBar component is made up of individual items.

- State: Inactive, Active, Hover, Focus
- Icon: off/on
- Additional line: off/on