Navigation Drawer
- Web Components
- Flutter
Demo
zeta-web v0.6.6
Web Components
Navigation drawers provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-navigation-drawer--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | The main content of the drawer. | text |
| header | The drawer header. | text |
| footer | The drawer footer. | text |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| anchor | The side of the screen that the drawer is anchored on. | "left" | "right" | "left" |
| showAnimation | Toggles the animation for the navigation drawer. | boolean | true |
| initialOpen | Whether the modal is initially open. | boolean | false |
Inherited Attributes
| Name | Description | Type | Default | Inherited From |
|---|---|---|---|---|
| returnValue | Return value of the dialog. | string | "" | Popup |
| closeOnBarrierClicked | Whether the modal should close when the background barrier is clicked.This is only relevant for modal dialogs, non-modal dialogs do not control their background barrier. | boolean | true | Popup |
| open | Whether component is open or closed. | undefined | undefined | Popup |
Flutter component not available yet
Figma
https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/%F0%9F%A6%93-ZDS---Components?node-id=1139-23491