Menubar

In Development

This component is currently in development. The API is not yet stable and may change in future releases.

The Menubar renders a horizontal bar of top-level menu items, following the WAI-ARIA menubar pattern.

Usage

Basic Usage

• File
• Edit
• View

Open Editor

import { Menubar, MenubarItem } from "@paramanu/navigation-react"

export default function App() {
return (
  <Menubar>
    <MenubarItem>File</MenubarItem>
    <MenubarItem>Edit</MenubarItem>
    <MenubarItem>View</MenubarItem>
  </Menubar>
)
}

<ul class="pm-menubar" role="menubar">
<li role="none"><button class="pm-menubar__item" role="menuitem">File</button></li>
<li role="none"><button class="pm-menubar__item" role="menuitem">Edit</button></li>
<li role="none"><button class="pm-menubar__item" role="menuitem">View</button></li>
</ul>

Guidelines

Accessibility

Key	Action
ArrowRight	Move to next item
ArrowLeft	Move to previous item
Enter / Space	Activate focused item
Home	Move to first item
End	Move to last item

• Uses role="menubar" on the container and role="menuitem" on items.

API

MenubarItem Props

Prop	Type	Default	Description
active	boolean	false	Active/expanded state
disabled	boolean	false	Disabled state

CSS Classes

Class	Description
pm-menubar	Root element
pm-menubar__item	Menu item button
pm-menubar__item--active	Active item
pm-menubar__item--disabled	Disabled item