import { Meta } from '@storybook/addon-docs';

<Meta title="Components/Navbar/Navbar" />

# Navbar

The NavBar component is primarily to navigate within apps.
This component is built to have the NavBarSection component passed into it. NavBarSection is an iterative component with an array of objects passed into it.

The NavBar should:
- Be visually separate from the content.
- Have descriptive titles describing the destination, action item or category.
- Group navigation items into sections based on related categories.
- Order content logically for a natural progression.

### Required Components

This component requires these components:
- NavBarItem
- NavBarItemLink
- NavBarItemButton
- NavBarSection

### Accessibility

#### Keyboard Navigation

These keys provide additional functionality to the component.

| Key | Functions |
| ---- | ---- |
| Tab | All of the content in the NavBar is focusable. |
| Shift + Tab | Moves focus to the previous focusable component. |
| Space or Enter | Toggles the component when the accordion is focused. |
| Arrow keys | All components within the NavBar are accessible using arrow keys. |
| Esc | Pressing the escape key when the accordion is open and focused collapses the component. |

#### Screen readers

This component uses the following attributes to assist screen readers:
- Each Link component uses the **`aria-label`** attribute to provide an accessible name.
- The Icon uses the **`aria-hidden`** attribute to hide its content from assistive technology.