import './Navigation.css'

## Examples

### Default


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Grouped nav


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Grouped nav, no titles


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Expanded


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Expanded with subnav titles


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### Mixed


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### Expandable, third level


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

### Horizontal


import Example8 from './Example8.html?raw'

<LiveExample html={Example8} />

### Horizontal overflow


import Example9 from './Example9.html?raw'

<LiveExample html={Example9} />

### Horizontal subnav


import Example10 from './Example10.html?raw'

<LiveExample html={Example10} />

### Horizontal subnav overflow


import Example11 from './Example11.html?raw'

<LiveExample html={Example11} />

### Nav with flyout


import Example12 from './Example12.html?raw'

<LiveExample html={Example12} />

### Nav with drilldown menu


import Example13 from './Example13.html?raw'

<LiveExample html={Example13} />

### Nav with drilldown menu level two


import Example14 from './Example14.html?raw'

<LiveExample html={Example14} />

### Nav with drilldown menu level three


import Example15 from './Example15.html?raw'

<LiveExample html={Example15} />

### Nav item icons


import Example16 from './Example16.html?raw'

<LiveExample html={Example16} />

## Documentation

### Overview

The navigation system relies on several different sub-components:

* `.pf-v6-c-nav__list` - default navigation list. It is the basis for both default and expandable, vertical navigation.

### Accessibility

| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `aria-label="[landmark description]"` | `.pf-v6-c-nav` |  Describes `<nav>` landmark. |
| `aria-label="[section title]"` | `.pf-v6-c-nav__section` |  Describes a nav `<section>`, where a `.pf-v6-c-nav__section-title` is not present. |
| `aria-labelledby="[id value of link describing subnav]"` | `.pf-v6-c-nav__subnav` |  Gives the subnav `<section>` landmark an accessible name by referring to the element that provides the subnav `<section>` landmark title. |
| `aria-expanded="false"` | `.pf-v6-c-nav__link` |  Indicates that subnav section is hidden. |
| `aria-expanded="true"` | `.pf-v6-c-nav__link` |  Indicates that subnav section is visible. |
| `hidden` | `.pf-v6-c-nav__subnav` |  Indicates that the subnav section is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
| `disabled` | `.pf-v6-c-nav__scroll-button` | Indicates that a scroll button is disabled, when at the first or last item of a list. **Required when disabled** |
| `aria-current="page"` | `.pf-v6-c-nav__link` |  Indicates the current page link. Can only occur once on page. |
| `aria-haspopup="true"` | `.pf-v6-c-nav__link` | Declares that a nav item has a submenu. |

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-nav` | `<nav>` | Initiates a primary nav element. |
| `.pf-v6-c-nav__subnav` | `<section>` | Initiates a subnav section. |
| `.pf-v6-c-nav__list` | `<ul>` | Initiates nav list. |
| `.pf-v6-c-nav__item` | `<li>` | Initiates nav list item. |
| `.pf-v6-c-nav__link` | `<a>` | Initiates nav list link. |
| `.pf-v6-c-nav__link-icon` | `<span>` | Initiates nav list link icon. |
| `.pf-v6-c-nav__link-text` | `<span>` | Initiates nav list link text. |
| `.pf-v6-c-nav__section` | `<section>` | Initiates a nav section element. |
| `.pf-v6-c-nav__section-title` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` | Initiates a nav section title. |
| `.pf-v6-c-nav__toggle` | `<span>` | Initiates the nav toggle wrapper. |
| `.pf-v6-c-nav__toggle-icon` | `<span>` | Initiates a nav toggle icon wrapper. |
| `.pf-v6-c-nav__scroll-button` | `<button>` | Initiates a nav scroll button. **Required for horizontal navs** |
| `.pf-m-horizontal` | `.pf-v6-c-nav` | Modifies nav for the horizontal variation. |
| `.pf-m-horizontal-subnav` | `.pf-v6-c-nav` | Modifies nav for the horizontal subnav variation. |
| `.pf-m-flyout` | `.pf-v6-c-nav__item` | Modifies nav item for the flyout variation. |
| `.pf-m-scrollable` | `.pf-v6-c-nav` | Modifies nav for the scrollable state. |
| `.pf-m-expanded` | `.pf-v6-c-nav__item` | Modifies for the expanded state. |
| `.pf-m-current` | `.pf-v6-c-nav__link` | Modifies for the current state. |
| `.pf-m-hover` | `.pf-v6-c-nav__link` | Modifies for the hover state. |