import './nav.css';

## Examples

### Default


import NavDefault from "./NavDefault.tsx?raw"

<LiveExample src={NavDefault} />

### Grouped

The following example shows two navigation groups, each with a `title` prop passed into the nav group component. To keep nav groups accessible an `aria-label` must be passed in if the `title` prop is not passed in.


import NavGrouped from "./NavGrouped.tsx?raw"

<LiveExample src={NavGrouped} />

### Expandable


import NavExpandable from "./NavExpandable.tsx?raw"

<LiveExample src={NavExpandable} />

### Expandable third level


import NavExpandableThirdLevel from "./NavExpandableThirdLevel.tsx?raw"

<LiveExample src={NavExpandableThirdLevel} />

### Mixed


import NavMixed from "./NavMixed.tsx?raw"

<LiveExample src={NavMixed} />

### Horizontal navigation


import NavHorizontalNav from "./NavHorizontalNav.tsx?raw"

<LiveExample src={NavHorizontalNav} />

### Horizontal subnav


import NavHorizontalSubNav from "./NavHorizontalSubNav.tsx?raw"

<LiveExample src={NavHorizontalSubNav} />

### Flyout

A flyout should be a `Menu` component. Press `space` or `right arrow` to open a flyout using the keyboard, use the arrow keys to navigate between flyout items, and press `escape` or `left arrow` to close a flyout.


import NavFlyout from "./NavFlyout.tsx?raw"

<LiveExample src={NavFlyout} />

### Drilldown


import NavDrilldown from "./NavDrilldown.tsx?raw"

<LiveExample src={NavDrilldown} />

### With item icons


import NavIcons from "./NavIcons.tsx?raw"

<LiveExample src={NavIcons} />


## Types

### NavSelectClickHandler

The NavItem `onClick` prop accepts the `NavSelectClickHandler` type, which is made up of the following argument and return types:

```
(
  event: React.FormEvent<HTMLInputElement>,
  itemId: number | string,
  groupId: number | string,
  to: string
) => void;
```