Navigation group
Expandable categories for an app shell drawer.
import 'material-next-web-components/app-shell.js';On this page
Overview
<mnw-navigation-group> groups destinations under a category button. Enter, Space or a click opens
it. Destinations stay mounted while collapsed, so their state survives. A newly active destination
opens its group. The app shell reveals an active group before focusing its destination when the
drawer opens.
Contact destination
About destination
<mnw-navigation-group slot="navigation" label="Profile" icon="person">
<mnw-navigation-item href="#contact">Contact</mnw-navigation-item>
<mnw-navigation-item href="#about-me">About Me</mnw-navigation-item>
</mnw-navigation-group>The open boolean attribute controls expansion. Collapse removes children from keyboard navigation
and the accessibility tree. Motion follows the reduced-motion preference. Groups can be nested.
API
An expandable category in an app shell drawer. Destinations stay mounted while collapsed. A newly active destination opens its category.
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
label | label | string | '' | Category name. |
icon | icon | string | '' | Material Symbols name. |
open | open | boolean | false | Whether destinations are expanded. |
| Event | Description |
|---|---|
navigation-group-toggle | {open} after the visitor toggles the category. |
| Slot | Description |
|---|---|
| Default | Navigation items, or nested navigation groups. |
icon | A custom category icon, overriding icon. |
| Part | Description |
|---|---|
toggle | The category button. |