Navigation Tab

Demo

Checked

Code

<mdc-navigation-tab name="w0x2rri2" value="/1" label="Unchecked">
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

<mdc-navigation-tab name="w0x2rri2" value="/2" checked label="Checked">
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

Default Checked

Code

<mdc-navigation-tab name="dc-demo" value="/1" label="Normal">
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

<mdc-navigation-tab name="dc-demo" value="/2" default-checked checked label="Default Checked">
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

Disabled

Code

<mdc-navigation-tab name="20qdow411" value="/1" label="Enabled">
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

<mdc-navigation-tab name="20qdow411" value="/2" label="Disabled" disabled>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

<mdc-navigation-tab name="20qdow411" value="/3" default-checked label="Disabled" disabled>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

Href

Code

<mdc-navigation-tab href="/" value="/" label="Home">
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

<mdc-navigation-tab href="/profile" value="/profile" label="Profile">
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

Label

Code

<mdc-navigation-tab name="0x22rj1" value="/1" label="Short">
    <mdc-icon slot="inactive-icon">send</mdc-icon>
    <mdc-icon slot="active-icon">send</mdc-icon>
</mdc-navigation-tab>
<mdc-navigation-tab name="0x22rj1" value="/2" label="A longer label">
    <mdc-icon slot="inactive-icon">send</mdc-icon>
    <mdc-icon slot="active-icon">send</mdc-icon>
</mdc-navigation-tab>
<mdc-navigation-tab name="0x22rj1" value="/3" label="Very long descriptive label text">
    <mdc-icon slot="inactive-icon">send</mdc-icon>
    <mdc-icon slot="active-icon">send</mdc-icon>
</mdc-navigation-tab>

Name

Code

<form>
    <mdc-navigation-tab name="nav-tab-group" value="a" checked label="A">
        <mdc-icon slot="icon">send</mdc-icon>
    </mdc-navigation-tab>
    <mdc-navigation-tab name="nav-tab-group" value="b" label="B">
        <mdc-icon slot="icon">send</mdc-icon>
    </mdc-navigation-tab>
    <mdc-navigation-tab name="nav-tab-group" value="c" label="C">
        <mdc-icon slot="icon">send</mdc-icon>
    </mdc-navigation-tab>
</form>

Navigation Scope

Code

<mdc-navigation-tab navigation-scope="tab-scope-a" value="/" checked label="Tab A1">
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

<mdc-navigation-tab navigation-scope="tab-scope-b" value="/" checked label="Tab B1">
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

Required

Code

<mdc-navigation-tab name="req-demo" value="/1" label="Required Unchecked" required>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

<mdc-navigation-tab name="req-demo" value="/2" label="Required Checked" required default-checked>
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

Target

Code

<mdc-navigation-tab href="https://material.io" target="_blank" value="material" label="Material">
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>
<mdc-navigation-tab href="/" target="_self" value="home" label="Self">
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

Value

Code

<mdc-navigation-tab name="kefw02c2m" value="/" checked label="Home">
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

<mdc-navigation-tab name="kefw02c2m" value="/profile" label="Profile">
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

<mdc-navigation-tab name="kefw02c2m" value="/settings" label="Settings">
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

Variant

Code

<mdc-navigation-tab name="ntv" value="/" checked label="Bar Horizontal" variant="bar-horizontal">
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

<mdc-navigation-tab name="ntv" value="/" checked label="Bar Vertical" variant="bar-vertical">
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

<mdc-navigation-tab name="ntv" value="/" checked label="Rail Vertical" variant="rail-vertical">
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

<mdc-navigation-tab name="ntv" value="/" checked label="Rail Round" variant="rail-round">
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>

<mdc-navigation-tab name="ntv" value="/" checked label="Drawer" variant="drawer">
    <mdc-icon slot="icon">send</mdc-icon>
</mdc-navigation-tab>