Nav
Examples
Nav Props
The Nav component accepts the following props.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | node | null | Anything that can be rendered inside of the nav | |
| className | string | '' | Additional classes added to the container | |
| onSelect | func | () => undefined | Callback for updating when item selection changes | |
| onToggle | func | () => undefined | Callback for when a list is expanded or collapsed | |
| aria-label | string | Accessibility label |
NavGroup Props
The NavGroup component accepts the following props.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | Title shown for the group | ||
| children | node | null | Anything that can be rendered inside of the group | |
| className | string | '' | Additional classes added to the container | |
| id | string | '' | Identifier to use for the section aria label |
NavList Props
The NavList component accepts the following props.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| variant | enum: default, simple, horizontal, tertiary | 'default' | Indicates the list type. | |
| children | node | null | Children nodes | |
| className | string | '' | Additional classes added to the list |
NavExpandable Props
The NavExpandable component accepts the following props.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | Title shown for the expandable list | ||
| srText | string | '' | If defined, screen readers will read this text instead of the list title | |
| isExpanded | bool | false | If true will default the list to be expanded | |
| children | node | null | Anything that can be rendered inside of the expandable list | |
| className | string | '' | Additional classes added to the container | |
| groupId | string | number | null | Group identifier, will be returned with the onToggle and onSelect callback passed to the Nav component | |
| isActive | bool | false | If true makes the expandable list title active | |
| id | string | '' | Identifier to use for the section aria label |
NavItem Props
The NavItem component accepts the following props.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | node | null | Content rendered inside the nav item | |
| className | string | '' | Additional classes added to the nav item | |
| to | string | '' | Target navigation link | |
| isActive | bool | false | Flag indicating whether the item is active | |
| groupId | string | number | null | Group identifier, will be returned with the onToggle and onSelect callback passed to the Nav component | |
| itemId | string | number | null | Item identifier, will be returned with the onToggle and onSelect callback passed to the Nav component | |
| preventDefault | bool | false | If true prevents the default anchor link action to occur. Set to true if you want to handle navigation yourself. | |
| onClick | func | null | Callback for item click |