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);