Navigation

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