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
The side of the screen that the drawer is anchored on.
closeOnBarrierClicked
closeOnBarrierClicked:boolean
hide
hide:(returnValue?:string)=>Promise<void>
initialOpen
initialOpen:boolean = false
Whether the modal is initially open.
onBarrierClicked
onBarrierClicked:(e:Event)=>void
open
open:boolean
returnValue
returnValue:string
show
show:()=>Promise<void>
showAnimation
showAnimation:boolean = true
Toggles the animation for the navigation drawer.
showModal
showModal:()=>Promise<void>
StaticshadowRootOptions
shadowRootOptions:{delegatesFocus:boolean} = ...
Staticstyles
styles:CSSResultGroup[] = ...
rendering
Protectedrender
render():TemplateResult<1>
Invoked on each update to perform rendering tasks. This method may return
any value renderable by lit-html's ChildPart - typically a
TemplateResult. Setting properties inside this method will not trigger
the element to update.
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
Slot
Slot
header - The drawer header.
Slot
footer - The drawer footer.
Figma
https://www.figma.com/design/JesXQFLaPJLc1BdBM4sisI/🦓-ZDS---Components?node-id=1075-21296&node-type=canvas&m=dev
Storybook
https://zeta-ds.web.app/web/storybook/index.html?path=/docs/navigation-drawer--docs