Lists Others Tabs

Navigation drawer (drawer)

Navigation drawers provide access to destinations in your app.

🔗 External documentation.

ID Label Description Schema
items Items A flat list of links. 
                        type: array
items:
    type: object
    properties:
        title:
            type: string
        attributes:
            $ref: '#/$defs/attributes_value'
        below:
            type: object

                      
            id: drawer
label: 'Navigation drawer'
description: 'Navigation drawers provide access to destinations in your app. '
homepage: 'https://m2.material.io/components/navigation-drawer'
variants:
    default:
        id: default
        label: Default
    modal:
        id: modal
        label: Modal
    dismissible:
        id: dismissible
        label: Dismissible
props:
    items:
        id: items
        label: Items
        description: 'A flat list of links.'
        schema:
            type: array
            items:
                type: object
                properties:
                    title:
                        type: string
                    attributes:
                        $ref: '#/$defs/attributes_value'
                    below:
                        type: object
library:
    dependencies:
        - material_icons
    id: drawer
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': drawer
            items:
                -
                    title: Inbox
                    url: '#'
                    attributes:
                        class:
                            - active
                -
                    title: Outgoing
                    url: '#'
                -
                    title: Drafts
                    url: '#'

Default ( default )

<aside class="mdc-drawer"> <div class="mdc-drawer__content"> <nav class="mdc-list"> <a aria-current="page" class="active mdc-list-item mdc-list-item--activated" href="#"> <span class="mdc-list-item__ripple"></span> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i> <span class="mdc-list-item__text">Inbox</span> </a> <a class="mdc-list-item" href="#"> <span class="mdc-list-item__ripple"></span> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i> <span class="mdc-list-item__text">Outgoing</span> </a> <a class="mdc-list-item" href="#"> <span class="mdc-list-item__ripple"></span> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i> <span class="mdc-list-item__text">Drafts</span> </a> </nav> </div> </aside>

Modal ( modal )

<aside class="mdc-drawer--modal mdc-drawer"> <div class="mdc-drawer__content"> <nav class="mdc-list"> <a aria-current="page" class="active mdc-list-item mdc-list-item--activated" href="#"> <span class="mdc-list-item__ripple"></span> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i> <span class="mdc-list-item__text">Inbox</span> </a> <a class="mdc-list-item" href="#"> <span class="mdc-list-item__ripple"></span> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i> <span class="mdc-list-item__text">Outgoing</span> </a> <a class="mdc-list-item" href="#"> <span class="mdc-list-item__ripple"></span> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i> <span class="mdc-list-item__text">Drafts</span> </a> </nav> </div> </aside>

Dismissible ( dismissible )

<aside class="mdc-drawer--dismissible mdc-drawer"> <div class="mdc-drawer__content"> <nav class="mdc-list"> <a aria-current="page" class="active mdc-list-item mdc-list-item--activated" href="#"> <span class="mdc-list-item__ripple"></span> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i> <span class="mdc-list-item__text">Inbox</span> </a> <a class="mdc-list-item" href="#"> <span class="mdc-list-item__ripple"></span> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i> <span class="mdc-list-item__text">Outgoing</span> </a> <a class="mdc-list-item" href="#"> <span class="mdc-list-item__ripple"></span> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i> <span class="mdc-list-item__text">Drafts</span> </a> </nav> </div> </aside>