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