Iryx UINavigation
INavigationMenu
A horizontal app nav where an entry can open a panel of links. An entry with its own items is a panel trigger; everything else is a plain link.
Panels
Give an entry items and it becomes a trigger. Every panel shares one viewport, so the panel resizes and slides as you move between triggers.
description is a second line under the label and shows only inside a panel. columns splits a panel into two or three — set it on the menu for every panel, or on one entry to override it there, as "Records" does above.
Vertical
The same data laid out as a column. For a primary side navigation with sections, badges and a collapse mode, use ISidebar.
Opening on click
Panels open on hover after delayDuration milliseconds. disableHoverTrigger switches them to click, which is what a touch-first app wants.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | NavigationMenuEntry[] | — | Top-level entries; one with items opens a panel |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout of the top-level list |
columns | 1 | 2 | 3 | 1 | Columns in a panel; an entry can override it |
label | string | 'Main' | Accessible name for the navigation landmark |
delayDuration | number | — | Milliseconds a pointer must rest before a panel opens |
disableHoverTrigger | boolean | — | Open on click only |
unstyled | boolean | — | Drop built-in classes |
class | string | — | Merged with the built-in classes |
ui | { root?, list?, item?, link?, triggerIcon?, viewportWrapper?, viewport?, content?, panelLink?, panelLabel?, panelDescription?, panelIcon? } | — | Per-slot class overrides |
Slots
| Slot | Props | When to use it |
|---|---|---|
list | — | Replace the whole top-level list |
trigger | { item } | Render a panel trigger yourself |
panel | { item } | Replace a panel's contents entirely |
item | { item } | Render one top-level link yourself |
Item shapes
interface NavigationMenuLinkItem {
label: string
href?: string
target?: string
icon?: IconLike
description?: string
disabled?: boolean
active?: boolean
onSelect?: () => void
}
interface NavigationMenuGroupItem extends NavigationMenuLinkItem {
items: NavigationMenuLinkItem[]
columns?: 1 | 2 | 3
}An entry without href renders a <button>, so onSelect can hand navigation to a router. active is reflected as both data-active and aria-current.