A collection of links for navigating apps.

NavigationMenu exports many components that combine to form a navigation menu.

<NavigationMenu>
<NavigationMenu.Link href="/overview/introduction">
Introduction
</NavigationMenu.Link>
<NavigationMenu.Dropdown id="1">
<NavigationMenu.DropdownTrigger>Theme</NavigationMenu.DropdownTrigger>
<NavigationMenu.DropdownContent>
<NavigationMenu.DropdownItem href="/theme/colours">
Colours
</NavigationMenu.DropdownItem>
<NavigationMenu.DropdownItem href="/theme/effects">
Effects
</NavigationMenu.DropdownItem>
<NavigationMenu.DropdownItem href="/theme/icons">
Icons
</NavigationMenu.DropdownItem>
</NavigationMenu.DropdownContent>
</NavigationMenu.Dropdown>
</NavigationMenu>

With client side routing

NavigationMenu.Dropdown, NavigationMenu.DropdownItem and NavigationMenu.Link can be passed an active prop for instances when you want to highlight the currently active route. See below for examples using client side routing with the NavigationMenu.Link component. The same method can be applied to NavigationMenu.Dropdown and NavigationMenu.DropdownItem.

Example using React Router

const Link = ({ href, ...props }) => {
const { pathname } = useLocation()
const isActive = path === href
return (
<NavigationMenu.Link active={isActive} {...props}>
Introduction
</NavigationMenu.Link>
)
}

Example using Next JS

const Link = ({ href, ...props }) => {
const router = useRouter()
const isActive = router.asPath === href
return (
<NavigationMenu.Link active={isActive} {...props}>
Introduction
</NavigationMenu.Link>
)
}

Changing the layout of the dropdown content

By default, dropdown items inside of NavigationMenu.DropdownContent will stack.

If you want to change the way items are displayed, you can add custom styling to NavigationMenu.DropdownContent.

In the below example the styling of NavigationMenu.DropdownContent has been changed to allow a grid layout.

<NavigationMenu>
<NavigationMenu.Link href="/overview/introduction">
Introduction
</NavigationMenu.Link>
<NavigationMenu.Dropdown id="1">
<NavigationMenu.DropdownTrigger>Theme</NavigationMenu.DropdownTrigger>
<NavigationMenu.DropdownContent
css={{
display: 'grid',
gap: '$1',
gridAutoFlow: 'column',
width: 500,
gridTemplateRows: 'repeat(2, 1fr)'
}}
>
{['colours', 'icons', 'effects', 'typography'].map((item) => (
<NavigationMenu.DropdownItem href={`/theme/${item}`}>
<NavigationMenu.DropdownItemTitle>
{item}
</NavigationMenu.DropdownItemTitle>
<Text>This is some example text about {item}</Text>
</NavigationMenu.DropdownItem>
))}
</NavigationMenu.DropdownContent>
</NavigationMenu.Dropdown>
</NavigationMenu>

DropdownItem composition example

DropdownItem gives a lot of flexibility. It's an easy to compose it for own purposes.

<NavigationMenu.DropdownItem href="/" active>
<Grid
css={{
gridTemplateColumns: '1fr 7fr'
}}
>
<Icon is={Feed} size={'md'} />
<Flex css={{ flexDirection: 'column' }}>
<NavigationMenu.DropdownItemTitle bold css={{ mb: '$3' }}>
Example title
</NavigationMenu.DropdownItemTitle>
<Text>This is example subtitle</Text>
</Flex>
</Grid>
</NavigationMenu.DropdownItem>

Dropdown Trigger

NavigationMenu.Dropdown gives you the way to pass your own trigger component inside the NavigationMenu.DropdownTrigger. The children of NavigationMenu.DropdownTrigger can be a plain text or more complex component.

<NavigationMenu.Dropdown id="1">
<NavigationMenu.DropdownTrigger>
<Avatar />
</NavigationMenu.DropdownTrigger>
<NavigationMenu.DropdownContent>// content</NavigationMenu.DropdownContent>
</NavigationMenu.Dropdown>
<NavigationMenu.Dropdown id="2">
<NavigationMenu.DropdownTrigger>
Plain text
</NavigationMenu.DropdownTrigger>
<NavigationMenu.DropdownContent>// content</NavigationMenu.DropdownContent>
</NavigationMenu.Dropdown>

API Reference

NavigationMenu

PropTypeDefaultRequired
cssCSSProperties

-

-

NavigationMenu.Link

PropTypeDefaultRequired
hrefstring

-

active
boolean

-

-

disabled
boolean

-

-

variant
"link" | "dropdownItem"
link

-

cssCSSProperties

-

-

NavigationMenu.Dropdown

PropTypeDefaultRequired
active
boolean

-

-

cssCSSProperties

-

-

NavigationMenu.DropdownContent

PropTypeDefaultRequired

NavigationMenu.DropdownItem

PropTypeDefaultRequired
hrefstring

-

disabled
boolean

-

-

cssCSSProperties

-

-

variant
"link" | "dropdownItem"

-

-

active
boolean

-

-