MDC

Navigation Rail

Demo

Alignment

Code
<mdc-navigation-rail alignment="top" style="height: 380px;">
    <mdc-navigation-tab name="rail-align-top" value="/home" label="Home" checked>
        <mdc-icon slot="inactive-icon">home</mdc-icon>
        <mdc-icon slot="active-icon" filled>home</mdc-icon>
    </mdc-navigation-tab>
    <mdc-navigation-tab name="rail-align-top" value="/search" label="Search">
        <mdc-icon slot="inactive-icon">search</mdc-icon>
        <mdc-icon slot="active-icon" filled>search</mdc-icon>
    </mdc-navigation-tab>
</mdc-navigation-rail>

<mdc-navigation-rail alignment="center" style="height: 380px;">
    <mdc-navigation-tab name="rail-align-center" value="/home" label="Home" checked>
        <mdc-icon slot="inactive-icon">home</mdc-icon>
        <mdc-icon slot="active-icon" filled>home</mdc-icon>
    </mdc-navigation-tab>
    <mdc-navigation-tab name="rail-align-center" value="/search" label="Search">
        <mdc-icon slot="inactive-icon">search</mdc-icon>
        <mdc-icon slot="active-icon" filled>search</mdc-icon>
    </mdc-navigation-tab>
</mdc-navigation-rail>

<mdc-navigation-rail alignment="bottom" style="height: 380px;">
    <mdc-navigation-tab name="rail-align-bottom" value="/home" label="Home" checked>
        <mdc-icon slot="inactive-icon">home</mdc-icon>
        <mdc-icon slot="active-icon" filled>home</mdc-icon>
    </mdc-navigation-tab>
    <mdc-navigation-tab name="rail-align-bottom" value="/search" label="Search">
        <mdc-icon slot="inactive-icon">search</mdc-icon>
        <mdc-icon slot="active-icon" filled>search</mdc-icon>
    </mdc-navigation-tab>
</mdc-navigation-rail>

Badges

Code
<mdc-navigation-rail style="height: 380px;">
    <mdc-navigation-tab name="rail-badge-1" value="/inbox" label="Inbox" badge="3" checked>
        <mdc-icon slot="inactive-icon">inbox</mdc-icon>
        <mdc-icon slot="active-icon" filled>inbox</mdc-icon>
    </mdc-navigation-tab>
    <mdc-navigation-tab name="rail-badge-1" value="/chat" label="Chat" badge="">
        <mdc-icon slot="inactive-icon">chat</mdc-icon>
        <mdc-icon slot="active-icon" filled>chat</mdc-icon>
    </mdc-navigation-tab>
    <mdc-navigation-tab name="rail-badge-1" value="/alerts" label="Alerts" badge="99+">
        <mdc-icon slot="inactive-icon">notifications</mdc-icon>
        <mdc-icon slot="active-icon" filled>notifications</mdc-icon>
    </mdc-navigation-tab>
</mdc-navigation-rail>

<mdc-navigation-rail expanded style="height: 380px;">
    <mdc-navigation-tab name="rail-badge-2" value="/inbox" label="Inbox" badge="3" checked>
        <mdc-icon slot="inactive-icon">inbox</mdc-icon>
        <mdc-icon slot="active-icon" filled>inbox</mdc-icon>
    </mdc-navigation-tab>
    <mdc-navigation-tab name="rail-badge-2" value="/chat" label="Chat" badge="">
        <mdc-icon slot="inactive-icon">chat</mdc-icon>
        <mdc-icon slot="active-icon" filled>chat</mdc-icon>
    </mdc-navigation-tab>
    <mdc-navigation-tab name="rail-badge-2" value="/alerts" label="Alerts" badge="99+">
        <mdc-icon slot="inactive-icon">notifications</mdc-icon>
        <mdc-icon slot="active-icon" filled>notifications</mdc-icon>
    </mdc-navigation-tab>
</mdc-navigation-rail>

Collapsed Variant

Code
<mdc-navigation-rail collapsed-variant="vertical" style="height: 380px;">
    <mdc-navigation-tab name="rail-cv-1" value="/home" label="Home" checked>
        <mdc-icon slot="inactive-icon">home</mdc-icon>
        <mdc-icon slot="active-icon" filled>home</mdc-icon>
    </mdc-navigation-tab>
    <mdc-navigation-tab name="rail-cv-1" value="/search" label="Search">
        <mdc-icon slot="inactive-icon">search</mdc-icon>
        <mdc-icon slot="active-icon" filled>search</mdc-icon>
    </mdc-navigation-tab>
    <mdc-navigation-tab name="rail-cv-1" value="/settings" label="Settings">
        <mdc-icon slot="inactive-icon">settings</mdc-icon>
        <mdc-icon slot="active-icon" filled>settings</mdc-icon>
    </mdc-navigation-tab>
</mdc-navigation-rail>

<mdc-navigation-rail collapsed-variant="round" style="height: 380px;">
    <mdc-navigation-tab name="rail-cv-2" value="/home" label="Home" checked>
        <mdc-icon slot="inactive-icon">home</mdc-icon>
        <mdc-icon slot="active-icon" filled>home</mdc-icon>
    </mdc-navigation-tab>
    <mdc-navigation-tab name="rail-cv-2" value="/search" label="Search">
        <mdc-icon slot="inactive-icon">search</mdc-icon>
        <mdc-icon slot="active-icon" filled>search</mdc-icon>
    </mdc-navigation-tab>
    <mdc-navigation-tab name="rail-cv-2" value="/settings" label="Settings">
        <mdc-icon slot="inactive-icon">settings</mdc-icon>
        <mdc-icon slot="active-icon" filled>settings</mdc-icon>
    </mdc-navigation-tab>
</mdc-navigation-rail>

End

Code
<div style="display: flex; gap: 32px; align-items: flex-start;">
    <mdc-navigation-rail style="height: 400px;">
        <mdc-icon-button slot="menu" onclick="const rail = this.closest('mdc-navigation-rail'); rail.toggle(); this.querySelector('mdc-icon').textContent = rail.expanded ? 'menu_open' : 'menu';">
            <mdc-icon>menu</mdc-icon>
        </mdc-icon-button>
        <mdc-navigation-tab name="rail-end-1" value="/home" label="Home" checked>
            <mdc-icon slot="inactive-icon">home</mdc-icon>
            <mdc-icon slot="active-icon" filled>home</mdc-icon>
        </mdc-navigation-tab>
        <mdc-navigation-tab name="rail-end-1" value="/search" label="Search">
            <mdc-icon slot="inactive-icon">search</mdc-icon>
            <mdc-icon slot="active-icon" filled>search</mdc-icon>
        </mdc-navigation-tab>
        <mdc-icon-button slot="end"><mdc-icon>settings</mdc-icon></mdc-icon-button>
    </mdc-navigation-rail>

    <mdc-navigation-rail expanded style="height: 400px;">
        <mdc-icon-button slot="menu" onclick="const rail = this.closest('mdc-navigation-rail'); rail.toggle(); this.querySelector('mdc-icon').textContent = rail.expanded ? 'menu_open' : 'menu';">
            <mdc-icon>menu_open</mdc-icon>
        </mdc-icon-button>
        <mdc-navigation-tab name="rail-end-2" value="/home" label="Home" checked>
            <mdc-icon slot="inactive-icon">home</mdc-icon>
            <mdc-icon slot="active-icon" filled>home</mdc-icon>
        </mdc-navigation-tab>
        <mdc-navigation-tab name="rail-end-2" value="/search" label="Search">
            <mdc-icon slot="inactive-icon">search</mdc-icon>
            <mdc-icon slot="active-icon" filled>search</mdc-icon>
        </mdc-navigation-tab>
        <mdc-icon-button slot="end"><mdc-icon>settings</mdc-icon></mdc-icon-button>
    </mdc-navigation-rail>
</div>

Expanded

Code
<div style="display: flex; flex-direction: column; gap: 16px;">
    <div>
        <mdc-button onclick="this.getRootNode().querySelector('#demo-rail-interactive').toggle()">
            <span>Toggle (Expand / Collapse)</span>
        </mdc-button>
    </div>

    <div style="display: flex; gap: 32px; align-items: flex-start;">
        <mdc-navigation-rail id="demo-rail-interactive" style="height: 380px;">
            <mdc-icon-button slot="menu" onclick="this.closest('mdc-navigation-rail').toggle()">
                <mdc-icon>menu</mdc-icon>
            </mdc-icon-button>
            <mdc-navigation-tab name="rail-exp-1" value="/home" label="Home" checked>
                <mdc-icon slot="inactive-icon">home</mdc-icon>
                <mdc-icon slot="active-icon" filled>home</mdc-icon>
            </mdc-navigation-tab>
            <mdc-navigation-tab name="rail-exp-1" value="/search" label="Search">
                <mdc-icon slot="inactive-icon">search</mdc-icon>
                <mdc-icon slot="active-icon" filled>search</mdc-icon>
            </mdc-navigation-tab>
            <mdc-navigation-tab name="rail-exp-1" value="/settings" label="Settings">
                <mdc-icon slot="inactive-icon">settings</mdc-icon>
                <mdc-icon slot="active-icon" filled>settings</mdc-icon>
            </mdc-navigation-tab>
        </mdc-navigation-rail>

        <mdc-navigation-rail expanded style="height: 380px;">
            <mdc-icon-button slot="menu" onclick="this.closest('mdc-navigation-rail').toggle()">
                <mdc-icon>menu_open</mdc-icon>
            </mdc-icon-button>
            <mdc-navigation-tab name="rail-exp-2" value="/home" label="Home" checked>
                <mdc-icon slot="inactive-icon">home</mdc-icon>
                <mdc-icon slot="active-icon" filled>home</mdc-icon>
            </mdc-navigation-tab>
            <mdc-navigation-tab name="rail-exp-2" value="/search" label="Search">
                <mdc-icon slot="inactive-icon">search</mdc-icon>
                <mdc-icon slot="active-icon" filled>search</mdc-icon>
            </mdc-navigation-tab>
            <mdc-navigation-tab name="rail-exp-2" value="/settings" label="Settings">
                <mdc-icon slot="inactive-icon">settings</mdc-icon>
                <mdc-icon slot="active-icon" filled>settings</mdc-icon>
            </mdc-navigation-tab>
        </mdc-navigation-rail>
    </div>
</div>

Fab

Code
<mdc-navigation-rail style="height: 380px;">
    <mdc-icon-button slot="menu"><mdc-icon>menu</mdc-icon></mdc-icon-button>
    <mdc-fab slot="fab" icon="edit" variant="primary"></mdc-fab>
    <mdc-navigation-tab name="rail-fab-1" value="/home" label="Home" checked>
        <mdc-icon slot="inactive-icon">home</mdc-icon>
        <mdc-icon slot="active-icon" filled>home</mdc-icon>
    </mdc-navigation-tab>
    <mdc-navigation-tab name="rail-fab-1" value="/search" label="Search">
        <mdc-icon slot="inactive-icon">search</mdc-icon>
        <mdc-icon slot="active-icon" filled>search</mdc-icon>
    </mdc-navigation-tab>
</mdc-navigation-rail>

<mdc-navigation-rail expanded style="height: 380px;">
    <mdc-icon-button slot="menu"><mdc-icon>menu_open</mdc-icon></mdc-icon-button>
    <mdc-fab slot="fab" icon="edit" label="Compose" variant="primary"></mdc-fab>
    <mdc-navigation-tab name="rail-fab-2" value="/home" label="Home" checked>
        <mdc-icon slot="inactive-icon">home</mdc-icon>
        <mdc-icon slot="active-icon" filled>home</mdc-icon>
    </mdc-navigation-tab>
    <mdc-navigation-tab name="rail-fab-2" value="/search" label="Search">
        <mdc-icon slot="inactive-icon">search</mdc-icon>
        <mdc-icon slot="active-icon" filled>search</mdc-icon>
    </mdc-navigation-tab>
</mdc-navigation-rail>

Menu

Code
<div style="display: flex; gap: 32px; align-items: flex-start;">
    <mdc-navigation-rail style="height: 380px;">
        <mdc-icon-button slot="menu" onclick="const rail = this.closest('mdc-navigation-rail'); rail.toggle(); this.querySelector('mdc-icon').textContent = rail.expanded ? 'menu_open' : 'menu';">
            <mdc-icon>menu</mdc-icon>
        </mdc-icon-button>
        <mdc-navigation-tab name="rail-menu-1" value="/home" label="Home" checked>
            <mdc-icon slot="inactive-icon">home</mdc-icon>
            <mdc-icon slot="active-icon" filled>home</mdc-icon>
        </mdc-navigation-tab>
        <mdc-navigation-tab name="rail-menu-1" value="/search" label="Search">
            <mdc-icon slot="inactive-icon">search</mdc-icon>
            <mdc-icon slot="active-icon" filled>search</mdc-icon>
        </mdc-navigation-tab>
    </mdc-navigation-rail>

    <mdc-navigation-rail expanded style="height: 380px;">
        <mdc-icon-button slot="menu" onclick="const rail = this.closest('mdc-navigation-rail'); rail.toggle(); this.querySelector('mdc-icon').textContent = rail.expanded ? 'menu_open' : 'menu';">
            <mdc-icon>menu_open</mdc-icon>
        </mdc-icon-button>
        <mdc-navigation-tab name="rail-menu-2" value="/home" label="Home" checked>
            <mdc-icon slot="inactive-icon">home</mdc-icon>
            <mdc-icon slot="active-icon" filled>home</mdc-icon>
        </mdc-navigation-tab>
        <mdc-navigation-tab name="rail-menu-2" value="/search" label="Search">
            <mdc-icon slot="inactive-icon">search</mdc-icon>
            <mdc-icon slot="active-icon" filled>search</mdc-icon>
        </mdc-navigation-tab>
    </mdc-navigation-rail>
</div>

Modal

Code
<mdc-button onclick="this.getRootNode().querySelector('#demo-modal-rail').show()">
    <span>Open Modal Navigation Rail</span>
</mdc-button>

<mdc-navigation-rail id="demo-modal-rail" modal style="height: 480px;">
    <mdc-icon-button slot="menu" onclick="this.closest('mdc-navigation-rail').hide()">
        <mdc-icon>close</mdc-icon>
    </mdc-icon-button>
    <mdc-fab slot="fab" icon="edit" variant="primary"></mdc-fab>
    <mdc-navigation-tab name="rail-mdl-tab" value="/inbox" label="Inbox" badge="3" checked>
        <mdc-icon slot="inactive-icon">inbox</mdc-icon>
        <mdc-icon slot="active-icon" filled>inbox</mdc-icon>
    </mdc-navigation-tab>
    <mdc-navigation-tab name="rail-mdl-tab" value="/chat" label="Chat" badge="">
        <mdc-icon slot="inactive-icon">chat</mdc-icon>
        <mdc-icon slot="active-icon" filled>chat</mdc-icon>
    </mdc-navigation-tab>
    <mdc-navigation-tab name="rail-mdl-tab" value="/settings" label="Settings">
        <mdc-icon slot="inactive-icon">settings</mdc-icon>
        <mdc-icon slot="active-icon" filled>settings</mdc-icon>
    </mdc-navigation-tab>
    <mdc-icon-button slot="end"><mdc-icon>help</mdc-icon></mdc-icon-button>
</mdc-navigation-rail>

Navigation Scope

Code
<mdc-navigation-rail expanded navigation-scope="rail-a" style="height: 320px;">
    <mdc-navigation-tab name="rsa" value="/" checked label="Scope A" variant="rail-horizontal" navigation-scope="rail-a">
        <mdc-icon slot="inactive-icon">home</mdc-icon>
        <mdc-icon slot="active-icon" filled>home</mdc-icon>
    </mdc-navigation-tab>
</mdc-navigation-rail>

<mdc-navigation-rail expanded navigation-scope="rail-b" style="height: 320px;">
    <mdc-navigation-tab name="rsb" value="/" checked label="Scope B" variant="rail-horizontal" navigation-scope="rail-b">
        <mdc-icon slot="inactive-icon">home</mdc-icon>
        <mdc-icon slot="active-icon" filled>home</mdc-icon>
    </mdc-navigation-tab>
</mdc-navigation-rail>

Quick

Code
<mdc-navigation-rail expanded quick style="height: 320px;">
    <mdc-navigation-tab name="qnr" value="/" checked label="Home" variant="rail-horizontal">
        <mdc-icon slot="inactive-icon">home</mdc-icon>
        <mdc-icon slot="active-icon" filled>home</mdc-icon>
    </mdc-navigation-tab>
</mdc-navigation-rail>

<mdc-navigation-rail expanded style="height: 320px;">
    <mdc-navigation-tab name="nr" value="/" checked label="Animated" variant="rail-horizontal">
        <mdc-icon slot="inactive-icon">home</mdc-icon>
        <mdc-icon slot="active-icon" filled>home</mdc-icon>
    </mdc-navigation-tab>
</mdc-navigation-rail>

Xr

Code
<mdc-navigation-rail style="height: 320px;">
    <mdc-navigation-tab name="xr1" value="/" checked label="Standard" variant="rail-vertical">
        <mdc-icon slot="inactive-icon">home</mdc-icon>
        <mdc-icon slot="active-icon" filled>home</mdc-icon>
    </mdc-navigation-tab>
</mdc-navigation-rail>

<mdc-navigation-rail xr style="height: 320px;">
    <mdc-navigation-tab name="xr2" value="/" checked label="XR" variant="rail-xr-vertical">
        <mdc-icon slot="inactive-icon">home</mdc-icon>
        <mdc-icon slot="active-icon" filled>home</mdc-icon>
    </mdc-navigation-tab>
</mdc-navigation-rail>