Drawer
Navigation drawer will auto hide based on screen size if there is also navigation rail
/ bar
<body>
<!-- you can change the width by setting this css var on the BODY style="--mc-navigation-drawer-width: 290px;" default: 360px -->
<mc-navigation-drawer>
<div slot="header" class="headline">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>
<!-- page-content -->
</body>
Navigation rail
Navigation rail will auto hide based on screen size if there is also navigation drawer
/ bar
<body>
<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>
<!-- page-content -->
<!--optional -->
<mc-navigation-bar>
...
</mc-navigation-bar>
</body>
Navigation bar
Navigation bars will auto hide based on screen size if there is also navigation drawer /
rail
<body>
<!-- optional -->
<mc-navigation-drawer>
...
</mc-navigation-drawer>
<!-- optional -->
<mc-navigation-rail>
...
</mc-navigation-rail>
<!-- page-content -->
<!-- can add auto-hide class to hide on scroll -->
<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>
</body>
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);