Drawer
Navigation drawer will auto hide based on screen size if there is also navigation rail / bar
<body>
<mc-navigation-drawer>
<div class=headline slot=header>Headline</div>
<a href=/>
<mc-icon slot=leading-icon>home</mc-icon>
Welcome
</a>
<a href=/mail>
<mc-icon slot=leading-icon>mail</mc-icon>
<mc-badge value=9999></mc-badge>
mail
</a>
<a href=/one>One</a>
<a href=/two>Two</a>
</mc-navigation-drawer>
</body>
Navigation rail
Navigation rail will auto hide based on screen size if there is also navigation drawer / bar
<mc-navigation-drawer>
...
</mc-navigation-drawer>
<mc-navigation-rail>
<a href=/>
<mc-icon slot=leading-icon>home</mc-icon>
</a>
<a href=/one>
<mc-icon slot=leading-icon>apps</mc-icon>
One
</a>
<a href=/two>
<mc-icon slot=leading-icon>palette</mc-icon>
Two
</a>
</mc-navigation-rail>
<mc-navigation-bar>
...
</mc-navigation-bar>
Navigation bar
Navigation bars will auto hide based on screen size if there is also navigation drawer / rail
<mc-navigation-drawer>
...
</mc-navigation-drawer>
<mc-navigation-rail>
...
</mc-navigation-rail>
<mc-navigation-bar auto-hide>
<mc-icon-button onclick="document.querySelector('mc-navigation-drawer').toggle()">
<mc-icon>menu</mc-icon>
</mc-icon-button>
<a href=/>
<mc-icon slot=leading-icon>home</mc-icon>
</a>
<a href=/getting-started>
<mc-icon slot=leading-icon>apps</mc-icon>
Get started
</a>
</mc-navigation-bar>
Style
CSS variables that allow you override default values
/* Optional variables for overriding */
--mc-anchor-text-color: var(--mc-on-surface-variant);
--mc-anchor-shape: var(--mc-shape-extra-large);
--mc-anchor-current-container-color: var(--mc-secondary-container);
/* controls all navigation's (drawer, bar, top, bottom, rail) */
--mc-navigation-container-color: var(--mc-surface-container);
--mc-navigation-drawer-width: 360px;
--mc-navigation-drawer-container-color: var(--mc-surface);
--mc-navigation-drawer-shape-local: var(--mc-shape-large);
--mc-navigation-rail-width: 88px;
--mc-navigation-rail-container-color: var(--mc-surface);
--mc-navigation-bar-container-color: var(--mc-surface-container);