Global Navigation
The Navigation component displays a responsive list of links that can collapse into a mobile-friendly menu.
Polymorphic Component
By default, content is rendered inside a <nav>, but this can be overriden by passing any valid tag name or component with the as prop.
Examples
Basic Navigation
The items placed into NavigationFull will be shown until there isn't enough room, or the small breakpoint is hit. Then, the content of NavigationMinimal will be displayed.
Props
NavigationProps
| Name | Type | Default Value | Required | Description |
|---|---|---|---|---|
All attributes of a <nav /> | ||||
forceCollapse | false | true | No | Force the menu to be collapsed? | |
NavigationBrandProps
| Name | Type | Default Value | Required | Description |
|---|---|---|---|---|
All attributes of a <a /> | ||||
NavigationCtaProps
| Name | Type | Default Value | Required | Description |
|---|---|---|---|---|
All attributes of a <button /> | ||||
buttonType | "text" | "primary" | "secondary" | 'primary' | No | Which type of button should be rendered? |
flush | false | true | false | No | Render a text button with no padding? |
href | string | No | The link to navigate to. | |
icon | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any> | No | An icon to display at the start of the button. Using an `IconName` string is deprecated. | |
iconEnd | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any> | No | An icon to display at the end of the button. Using an `IconName` string is deprecated. | |
iconStart | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any> | No | An icon to display at the start the button. Same as `icon`. Using an `IconName` string is deprecated. | |
loading | false | true | false | No | Display the loading state? |
size | "md" | "lg" | "sm" | 'md' | No | How large should the button be? |
state | "dark" | "critical" | "success" | "brand" | 'brand' | No | Which color should the button be? |
NavigationDropdownProps
| Name | Type | Default Value | Required | Description |
|---|---|---|---|---|
All attributes of a <ul /> | ||||
closeRef | MutableRefObject<(() => void) | undefined> | No | Close the dropdown programmatically. | |
disabled | false | true | No | If disabled, the dropdown will not open, and close if already opened. | |
mega | false | true | No | Should this be rendered as a mega menu? | |
title | ReactNode | Yes | The display text for the dropdown. | |
NavigationFullProps
| Name | Type | Default Value | Required | Description |
|---|---|---|---|---|
All attributes of a <div /> | ||||
NavigationItemProps
| Name | Type | Default Value | Required | Description |
|---|---|---|---|---|
All attributes of a <a /> | ||||
NavigationItemListProps
| Name | Type | Default Value | Required | Description |
|---|---|---|---|---|
All attributes of a <ul /> | ||||
NavigationMinimalProps
| Name | Type | Default Value | Required | Description |
|---|---|---|---|---|
All attributes of a <div /> | ||||
NavigationToggleProps
| Name | Type | Default Value | Required | Description |
|---|---|---|---|---|
All attributes of a <button /> | ||||
buttonType | "text" | "primary" | "secondary" | 'primary' | No | Which type of button should be rendered? |
flush | false | true | false | No | Render a text button with no padding? |
icon | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any> | No | An icon to display at the start of the button. Using an `IconName` string is deprecated. | |
iconEnd | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any> | No | An icon to display at the end of the button. Using an `IconName` string is deprecated. | |
iconStart | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<any, string | JSXElementConstructor<any>> | ForwardRefExoticComponent<any> | No | An icon to display at the start the button. Same as `icon`. Using an `IconName` string is deprecated. | |
loading | false | true | false | No | Display the loading state? |
onClick | (isMobileMenuOpen: boolean, e: MouseEvent<HTMLButtonElement, MouseEvent>) => void | No | ||
size | "md" | "lg" | "sm" | 'md' | No | How large should the button be? |
state | "dark" | "critical" | "success" | "brand" | 'brand' | No | Which color should the button be? |