Welcome Getting started Layout styles github-circle-black-transparent Source
Components
Badges
App bars
Bottom app bars Top app bars
Buttons
Common buttons FAB Icon buttons Segmented buttons
Cards Carousel Checkboxes Chips Date pickers Dialogs Forms Icons Lists Menus Navigation Progress indicators Pull to refresh Radios Search Selects
Sheets
Bottom sheets Side sheets
Sliders Snackbars Switches Tabs Text fields Time pickers Tooltips Utilities
home apps Buttons palette Two
Materially
github-circle-black-transparent

Navigation: Draws, rails, bottom bars

Navigation drawers provide ergonomic access to destinations in an app. Navigation rails provide access to primary destinations in apps when using tablet and desktop screens. Navigation bars let people switch between UI views on smaller devices

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);
            
menu home apps Get started