Navigation Menu
A collection of links for navigating websites, with support for trigger-activated content panels.
Default
Site navigation with trigger panels and a direct link.
Usage
julia
using Suite
NavigationMenu(
NavigationMenuList(
NavigationMenuItem(
NavigationMenuTrigger("Getting Started"),
NavigationMenuContent(
NavigationMenuLink(href="/intro", title="Introduction",
"A brief overview of the project."
),
),
),
NavigationMenuItem(
NavigationMenuLink(href="/docs", "Documentation"),
),
),
)Keyboard Interactions
| Key | Action |
|---|---|
| Arrow Right | Move focus to the next trigger |
| Arrow Left | Move focus to the previous trigger |
| Arrow Down | Open content panel / move into content |
| Tab | Cycle through links within an open content panel |
| Enter / Space | Activate the focused link or trigger |
| Escape | Close the open content panel |
API Reference
NavigationMenu
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | NavigationMenuList and NavigationMenuViewport |
| orientation | String | "horizontal" | "horizontal" or "vertical" |
| class | String | "" | Additional CSS classes |
NavigationMenuList
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | NavigationMenuItem children |
| class | String | "" | Additional CSS classes |
NavigationMenuItem
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Trigger + Content pair, or a direct Link |
| class | String | "" | Additional CSS classes |
NavigationMenuTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Trigger label text |
| class | String | "" | Additional CSS classes |
NavigationMenuContent
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | NavigationMenuLink items |
| class | String | "" | Additional CSS classes |
NavigationMenuLink
| Prop | Type | Default | Description |
|---|---|---|---|
| href | String | "" | URL the link navigates to |
| title | String | "" | Link heading text |
| children... | Any | - | Description text displayed below the title |
| class | String | "" | Additional CSS classes |
NavigationMenuViewport
| Prop | Type | Default | Description |
|---|---|---|---|
| class | String | "" | Additional CSS classes |
NavigationMenuIndicator
| Prop | Type | Default | Description |
|---|---|---|---|
| class | String | "" | Additional CSS classes |