MenuBar

A fixed horizontal top bar composed of a brand slot and a right-aligned actions slot.

Installation

npx dafink-ui add menu-bar

Also installs: Dropdown-menu

Demo

Acme

Composition

<MenuBarNav>/* sliding-pill nav group */

<MenuBarNavMore />/* overflow dropdown */

</MenuBarNav>

</MenuBar>

Props

Name	Type	Default	Description
height	string	'h-14'	Tailwind height class for the bar.
className	string	''	Additional CSS classes.
children	ReactNode	undefined	MenuBar content (brand, nav, search, actions).

Accessibility

MenuBarNav uses roving tabindex: only the active item (or the first enabled item, before anything is active) sits in the page's Tab order, so Tab moves into and out of the whole nav group in a single stop, the same mechanic as ToggleGroup. MenuBarNavItem sets aria-current="page" instead of aria-pressed since this is a navigation landmark, not a toggle group, and MenuBarNavMore composes DropdownMenu unmodified, so its own overlay keyboard behavior (focus on open, Escape closes and returns focus to the trigger, arrow-key navigation, typeahead) applies once its dropdown is open.

Key	Function
`tab`	Moves focus to the nav group's active item, or out to the next tabbable element if focus is already inside the group.
`shift`+`tab`	Moves focus out of the nav group to the previous tabbable element.
`enter`	Activates the focused item, or opens the dropdown when focus is on MenuBarNavMore.
`space`	Activates the focused item, or opens the dropdown when focus is on MenuBarNavMore.
`right arrow`	Moves focus to the next item, wrapping from the last item to the first.
`left arrow`	Moves focus to the previous item, wrapping from the first item to the last.
`home`	Moves focus to the first enabled item.
`end`	Moves focus to the last enabled item.