NavigationMenu
Site navigation with links and dropdown panels.
Surfaces
Use raised on the window background, plain inside a card, and outlined in a Section or other flat region. Each Trigger opens its Content in one shared Popup.
raised · on windowoutlined · flat regionplain · in a card
Links in the list
A Link in the List looks like a trigger. For an internal link, render a Gatsby Link. For an external link, use href.
Usage
These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.
- Use NavigationMenu for site navigation. For app commands, use Menubar.
- For an internal link, pass
render={<GatsbyLink to="/path" />}toNavigationMenu.Link.components/Linkdoes not forward a ref.
API
Props that the library adds. Every part also takes all the Base UI props.
NavigationMenu.List
| Prop | Type | Default | Description |
|---|---|---|---|
| appearance | 'plain' | 'outlined' | 'raised' | 'raised' | Sets the list surface. Raised adds a translucent fill and a shadow. |
NavigationMenu.Link
| Prop | Type | Default | Description |
|---|---|---|---|
| closeOnClick | boolean | true | Closes the menu when the user clicks the link. The Base UI default is false. |
NavigationMenu.Popup
| Prop | Type | Default | Description |
|---|---|---|---|
| align | 'start' | 'center' | 'end' | 'start' | Aligns the popup with the start edge of the open trigger. The Base UI default is center. |
| sideOffset | number | 4 | The gap between the list and the popup, in pixels. |
| collisionAvoidance | CollisionAvoidance | { side: 'none' } | The popup stays below the list. It does not flip to the other side. |
| container | HTMLElement | ShadowRoot | RefObject | null | – | The element that the popup renders into. The default is the document body. |