Navigation Drawer

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.

Alias: This component can be used with x-mbc::drawer or x-mbc::navigation-drawer.

Main Content Area

The drawer is permanently visible on the left side. 

<div style="display: flex; height: 300px; border: 1px solid #e0e0e0; position: relative;">
    <x-mbc::drawer variant="permanent" title="Navigation">
        <x-mbc::list>
            <x-mbc::list-item primary="Home" startIcon="home" />
            <x-mbc::list-item primary="Profile" startIcon="person" />
            <x-mbc::list-item primary="Settings" startIcon="settings" />
        </x-mbc::list>
    </x-mbc::drawer>
    
    <div style="flex: 1; padding: 1rem; background: #fafafa;">
        <x-mbc::typography variant="h6">Main Content Area</x-mbc::typography>
        <x-mbc::typography>The drawer is permanently visible on the left side.</x-mbc::typography>
    </div>
</div>

Permanent Drawer link

Permanent navigation drawers are always visible and pinned to the left edge. They're appropriate for desktop applications that require quick navigation to top-level destinations.

Email Application

This is a permanent drawer that stays open at all times. It's ideal for desktop layouts where screen space allows for persistent navigation.

The permanent drawer is best suited for applications with 3-7 primary navigation destinations. 

<div style="display: flex; height: 350px; border: 1px solid #e0e0e0; overflow: hidden;">
    <x-mbc::drawer variant="permanent">
        <x-mbc::list>
            <x-mbc::list-item primary="Inbox" startIcon="inbox" />
            <x-mbc::list-item primary="Starred" startIcon="star" />
            <x-mbc::list-item primary="Sent" startIcon="send" />
            <x-mbc::list-item primary="Drafts" startIcon="drafts" />
            <x-mbc::list-item primary="Trash" startIcon="delete" />
            <x-mbc::list-item primary="Spam" startIcon="report" />
        </x-mbc::list>
    </x-mbc::drawer>
    
    <div style="flex: 1; padding: 1.5rem; background: #fafafa; overflow-y: auto;">
        <x-mbc::typography variant="h5" gutterBottom>Email Application</x-mbc::typography>
        <x-mbc::typography variant="body1" gutterBottom>
            This is a permanent drawer that stays open at all times. It's ideal for desktop layouts where screen space allows for persistent navigation.
        </x-mbc::typography>
        <x-mbc::typography variant="body2" style="color: #666;">
            The permanent drawer is best suited for applications with 3-7 primary navigation destinations.
        </x-mbc::typography>
    </div>
</div>

Use Case: Desktop applications, admin dashboards, email clients, file managers.

Dismissible Drawer link

Dismissible drawers can be toggled open or closed. They sit at the same elevation as the content and can be closed to provide more space for the main content area.

Dashboard View

The dismissible drawer can be toggled to give more space to content. When closed, it disappears completely, allowing the content to expand.

Note: In a real implementation, you would add a menu button to toggle the drawer open/closed using JavaScript. 

<div style="display: flex; height: 350px; border: 1px solid #e0e0e0; overflow: hidden;">
    <x-mbc::drawer variant="dismissible" title="Menu">
        <x-mbc::list>
            <x-mbc::list-item primary="Dashboard" startIcon="dashboard" />
            <x-mbc::list-item primary="Analytics" startIcon="analytics" />
            <x-mbc::list-item primary="Reports" startIcon="assessment" />
            <x-mbc::list-item primary="Users" startIcon="people" />
            <x-mbc::list-item primary="Settings" startIcon="settings" />
        </x-mbc::list>
    </x-mbc::drawer>
    
    <div style="flex: 1; padding: 1.5rem; background: #fafafa; overflow-y: auto;">
        <x-mbc::typography variant="h5" gutterBottom>Dashboard View</x-mbc::typography>
        <x-mbc::typography variant="body1" gutterBottom>
            The dismissible drawer can be toggled to give more space to content. When closed, it disappears completely, allowing the content to expand.
        </x-mbc::typography>
        <x-mbc::typography variant="body2" style="color: #666;">
            <strong>Note:</strong> In a real implementation, you would add a menu button to toggle the drawer open/closed using JavaScript.
        </x-mbc::typography>
    </div>
</div>

Use Case: Responsive layouts, applications that need flexible navigation, when users benefit from seeing more content.

Modal Drawer link

Modal drawers sit above the content with a scrim overlay. They're commonly used for mobile navigation and can be dismissed by tapping the scrim or pressing escape.

Mobile Application

The modal drawer appears on top of the content with a backdrop scrim. This is the standard mobile navigation pattern.

Note: The modal drawer includes a dark scrim overlay behind it. Users can tap the scrim to close the drawer. 

<div style="position: relative; height: 350px; border: 1px solid #e0e0e0; overflow: hidden;">
    <x-mbc::drawer variant="modal" title="Mobile Menu">
        <x-mbc::list>
            <x-mbc::list-item primary="Home" startIcon="home" />
            <x-mbc::list-item primary="Explore" startIcon="explore" />
            <x-mbc::list-item primary="Favorites" startIcon="favorite" />
            <x-mbc::list-item primary="Library" startIcon="video_library" />
            <x-mbc::list-item primary="History" startIcon="history" />
            <x-mbc::list-item primary="Help" startIcon="help" />
        </x-mbc::list>
    </x-mbc::drawer>
    
    <div style="padding: 1.5rem; background: #fafafa; height: 100%; overflow-y: auto;">
        <x-mbc::typography variant="h5" gutterBottom>Mobile Application</x-mbc::typography>
        <x-mbc::typography variant="body1" gutterBottom>
            The modal drawer appears on top of the content with a backdrop scrim. This is the standard mobile navigation pattern.
        </x-mbc::typography>
        <x-mbc::typography variant="body2" style="color: #666;">
            <strong>Note:</strong> The modal drawer includes a dark scrim overlay behind it. Users can tap the scrim to close the drawer.
        </x-mbc::typography>
    </div>
</div>

Use Case: Mobile applications, temporary navigation, focus on drawer content, small screens.

Drawer with Header link

Drawers can include an optional header section with a title and subtitle. This is useful for displaying app branding, account information, or context.

Documentation Site

The drawer header displays the application name and version. This provides context and branding for the navigation drawer.

Headers can also be used to display user information, account switchers, or organization names. 

<div style="display: flex; height: 350px; border: 1px solid #e0e0e0; overflow: hidden;">
    <x-mbc::drawer 
        variant="permanent" 
        title="Material Blade" 
        subtitle="v1.0.0"
    >
        <x-mbc::list>
            <x-mbc::list-item primary="Getting Started" startIcon="play_arrow" />
            <x-mbc::list-item primary="Components" startIcon="widgets" />
            <x-mbc::list-item primary="Customization" startIcon="palette" />
            <x-mbc::list-item primary="Examples" startIcon="code" />
            <x-mbc::list-item primary="API Reference" startIcon="book" />
        </x-mbc::list>
    </x-mbc::drawer>
    
    <div style="flex: 1; padding: 1.5rem; background: #fafafa; overflow-y: auto;">
        <x-mbc::typography variant="h5" gutterBottom>Documentation Site</x-mbc::typography>
        <x-mbc::typography variant="body1" gutterBottom>
            The drawer header displays the application name and version. This provides context and branding for the navigation drawer.
        </x-mbc::typography>
        <x-mbc::typography variant="body2" style="color: #666;">
            Headers can also be used to display user information, account switchers, or organization names.
        </x-mbc::typography>
    </div>
</div>

Tip: Use the header to provide context about what the drawer contains or to display branding. The subtitle is optional and can show additional information like version numbers or account names.

Drawer Content link

Drawer content typically consists of navigation lists, but you can include any content. Common patterns include dividers between sections, nested navigation, and action items.

Complex Navigation

This drawer demonstrates organized navigation with multiple sections separated by dividers. Section headers help users understand the grouping.

Use dividers and section labels to create a clear information hierarchy in your drawer navigation. 

<div style="display: flex; height: 400px; border: 1px solid #e0e0e0; overflow: hidden;">
    <x-mbc::drawer variant="permanent" title="File Manager">
        <x-mbc::list>
            <x-mbc::list-item primary="My Files" startIcon="folder" />
            <x-mbc::list-item primary="Shared with me" startIcon="people" />
            <x-mbc::list-item primary="Recent" startIcon="schedule" />
            <x-mbc::list-item primary="Starred" startIcon="star" />
        </x-mbc::list>

        <x-mbc::list-divider />

        <x-mbc::typography variant="overline" style="padding: 8px 16px; color: #666;">
            Storage
        </x-mbc::typography>

        <x-mbc::list>
            <x-mbc::list-item primary="Documents" startIcon="description" />
            <x-mbc::list-item primary="Photos" startIcon="photo" />
            <x-mbc::list-item primary="Videos" startIcon="videocam" />
            <x-mbc::list-item primary="Music" startIcon="music_note" />
        </x-mbc::list>

        <x-mbc::list-divider />

        <x-mbc::list>
            <x-mbc::list-item primary="Settings" startIcon="settings" />
            <x-mbc::list-item primary="Help" startIcon="help" />
        </x-mbc::list>
    </x-mbc::drawer>
    
    <div style="flex: 1; padding: 1.5rem; background: #fafafa; overflow-y: auto;">
        <x-mbc::typography variant="h5" gutterBottom>Complex Navigation</x-mbc::typography>
        <x-mbc::typography variant="body1" gutterBottom>
            This drawer demonstrates organized navigation with multiple sections separated by dividers. Section headers help users understand the grouping.
        </x-mbc::typography>
        <x-mbc::typography variant="body2" style="color: #666;">
            Use dividers and section labels to create a clear information hierarchy in your drawer navigation.
        </x-mbc::typography>
    </div>
</div>

Best Practice: Group related navigation items together, use dividers to separate sections, and limit primary navigation to 7 items or fewer for optimal usability.

Properties link

mbc::drawer link

Name Type Default Description
slot html Drawer content (typically navigation items)
subtitle string null Optional header subtitle
title string null Optional header title
variant string permanent Drawer behavior: permanent, dismissible, modal

References link

Edit this page