MobileNav

MobileNav displays a tree of navigation items in a responsive overlay drawer.

Import#


import { MobileNav } from '@mantle-ui/react/mobilenav';

Basic#

MobileNav is controlled with the visible property. It uses a left-side overlay drawer by default, and closes on mask click, Escape, or after a leaf item is selected.


<Button icon="pi pi-bars" onClick={() => setVisible(true)} aria-controls="mobile-navigation" aria-expanded={visible} />
<MobileNav id="mobile-navigation" visible={visible} onHide={() => setVisible(false)} model={items} />

Menu Model#

The model is a tree of MenuItem objects. Root items with children are expandable; nested items without a URL are rendered as section labels. Set activeItem to an item, item id, or URL to mark the current page and expand its ancestor.


const items = [
    {
        label: 'Components',
        icon: 'pi pi-compass',
        items: [
            {
                label: 'Form',
                items: [
                    { label: 'Button', url: '/button' },
                    { label: 'InputText', url: '/inputtext' }
                ]
            }
        ]
    }
];

<MobileNav model={items} activeItem="/button" />

Accessibility#

Screen Reader

MobileNav renders a nav landmark. Use ariaLabel to provide its accessible name; it defaults to Navigation. The active leaf item receives aria-current="page", while expandable items expose their state with aria-expanded.

When the drawer opens, focus moves to its first available navigation item. Focus remains within the drawer while it is open and returns to the element that opened it when it closes.

Keyboard Support

Key	Function
enter	Expands or collapses a focused root navigation button, or activates a focused navigation link.
space	Expands or collapses the focused root navigation button.
tab	Moves focus to the next navigation item and wraps from the last item to the first.
shift + tab	Moves focus to the previous navigation item and wraps from the first item to the last.
escape	Closes the overlay drawer.