No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Svelte Bootstrap Navs
 
Svelte Navs - Bootstrap 4 & Material Design
  
Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and
    disabled states. Swap modifier classes to switch between each style.
 
Basic Example
   
 
 
<script>

  import {MDBNav, MDBNavItem, MDBNavLink} from "mdbsvelte";

</script>
<MDBNav class="justify-content-end">
  <MDBNavItem>
    <MDBNavLink active href="#!">Active</MDBNavLink>
  </MDBNavItem>
  <MDBNavItem>
    <MDBNavLink href="#!">Link</MDBNavLink>
  </MDBNavItem>
  <MDBNavItem>
    <MDBNavLink href="#!">Link</MDBNavLink>
  </MDBNavItem>
  <MDBNavItem>
    <MDBNavLink disabled href="#!">Disabled</MDBNavLink>
  </MDBNavItem>
</MDBNav>

 
Navs with bold font
   
 
 
 
<script>

  import {MDBNav, MDBNavItem, MDBNavLink, MDBRow, MDBCol} from "mdbsvelte";

</script>
<MDBRow>
  <MDBCol>
    <MDBNav class="font-weight-bold">
      <MDBNavLink active href="#!">Active</MDBNavLink>
      <MDBNavLink href="#!">Link</MDBNavLink>
      <MDBNavLink href="#!">Link</MDBNavLink>
      <MDBNavLink disabled href="#!">Disabled</MDBNavLink>
    </MDBNav>
  </MDBCol>

  <MDBCol>
    <MDBNav class="flex-column font-weight-bold">
      <MDBNavLink active href="#!">Active</MDBNavLink>
      <MDBNavLink href="#!">Link</MDBNavLink>
      <MDBNavLink href="#!">Link</MDBNavLink>
      <MDBNavLink disabled href="#!">Disabled</MDBNavLink>
    </MDBNav>
  </MDBCol>
</MDBRow>

 
Navs with various font and background color
   
 
 
 
 
<script>

  import {MDBNav, MDBNavLink, MDBContainer, MDBRow, MDBCol} from "mdbsvelte";

</script>
<MDBContainer>
  <MDBRow>
    <MDBCol>
      <MDBNav color="grey" class="flex-column font-weight-bold">
        <MDBNavLink class="white-text" active href="#!">Active</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 1</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 2</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 3</MDBNavLink>
      </MDBNav>
    </MDBCol>

    <MDBCol>
      <MDBNav color="amber" class="flex-column font-weight-bold">
        <MDBNavLink active href="#!" class="dark-grey-text">Active</MDBNavLink>
        <MDBNavLink href="#!" class="dark-grey-text">Link 1</MDBNavLink>
        <MDBNavLink href="#!" class="dark-grey-text">Link 2</MDBNavLink>
        <MDBNavLink href="#!" class="dark-grey-text">Link 3</MDBNavLink>
      </MDBNav>
    </MDBCol>

    <MDBCol>
      <MDBNav color="cyan" class="flex-column font-weight-bold">
        <MDBNavLink active href="#!" class="indigo-text">Active</MDBNavLink>
        <MDBNavLink href="#!">Link 1</MDBNavLink>
        <MDBNavLink href="#!">Link 2</MDBNavLink>
        <MDBNavLink href="#!">Link 3</MDBNavLink>
      </MDBNav>
    </MDBCol>
  </MDBRow>
</MDBContainer>

 
Navs with gradient background
   
 
 
 
 
 
<script>

  import {MDBNav, MDBNavLink, MDBContainer, MDBRow, MDBCol} from "mdbsvelte";

</script>
<MDBContainer>
  <MDBRow>
    <MDBCol size="6">
      <MDBNav color="peach-gradient" class="font-weight-bold py-4 px-2 mb-4">
        <MDBNavLink class="white-text" active href="#!">Active</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 1</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 2</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 3</MDBNavLink>
      </MDBNav>

      <MDBNav color="purple-gradient" class="font-weight-bold py-4 px-2 mb-4">
        <MDBNavLink class="white-text" active href="#!">Active</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 1</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 2</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 3</MDBNavLink>
      </MDBNav>
    </MDBCol>

    <MDBCol size="6">
      <MDBNav color="aqua-gradient" class="font-weight-bold py-4 px-2 mb-4">
        <MDBNavLink class="white-text" active href="#!">Active</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 1</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 2</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 3</MDBNavLink>
      </MDBNav>

      <MDBNav color="blue-gradient" class="font-weight-bold py-4 px-2 mb-4">
        <MDBNavLink class="white-text" active href="#!">Active</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 1</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 2</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 3</MDBNavLink>
      </MDBNav>
    </MDBCol>
  </MDBRow>
</MDBContainer>

 
Tabs
 
Takes the basic nav from above and add the .nav-tabs
         class to generate a tabbed interface.
  
 
 
<script>

  import {MDBNav, MDBNavLink, MDBContainer, MDBRow, MDBCol} from "mdbsvelte";

</script>
<MDBContainer>
  <MDBRow>
    <MDBCol size="6">
      <MDBNav color="peach-gradient" class="font-weight-bold py-4 px-2 mb-4">
        <MDBNavLink class="white-text" active href="#!">Active</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 1</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 2</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 3</MDBNavLink>
      </MDBNav>

      <MDBNav color="purple-gradient" class="font-weight-bold py-4 px-2 mb-4">
        <MDBNavLink class="white-text" active href="#!">Active</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 1</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 2</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 3</MDBNavLink>
      </MDBNav>
    </MDBCol>

    <MDBCol size="6">
      <MDBNav color="aqua-gradient" class="font-weight-bold py-4 px-2 mb-4">
        <MDBNavLink class="white-text" active href="#!">Active</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 1</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 2</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 3</MDBNavLink>
      </MDBNav>

      <MDBNav color="blue-gradient" class="font-weight-bold py-4 px-2 mb-4">
        <MDBNavLink class="white-text" active href="#!">Active</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 1</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 2</MDBNavLink>
        <MDBNavLink class="white-text" href="#!">Link 3</MDBNavLink>
      </MDBNav>
    </MDBCol>
  </MDBRow>
</MDBContainer>

 
Pills
 
Take that same code, but use .nav-pills class instead:
  
 
 
<script>

  import {MDBNav, MDBNavItem, MDBNavLink} from "mdbsvelte";

</script>
<MDBNav class="nav-pills">
  <MDBNavItem>
    <MDBNavLink active href="#!">Active</MDBNavLink>
  </MDBNavItem>
  <MDBNavItem>
    <MDBNavLink href="#!">Link 1</MDBNavLink>
  </MDBNavItem>
  <MDBNavItem>
    <MDBNavLink href="#!">Link 2</MDBNavLink>
  </MDBNavItem>
  <MDBNavItem>
    <MDBNavLink href="#!">Link 3</MDBNavLink>
  </MDBNavItem>
</MDBNav>

 
Fill and justify
 

    Force your Nav’s contents to extend the full available width one of two modifier classes. To
    proportionately
    fill all available space with your NavItems, use class .nav-fill. Notice that all
    horizontal space is occupied, but
    not every nav item has the same width.
  
  
 
 
<script>

  import {MDBNav, MDBNavItem, MDBNavLink} from "mdbsvelte";

</script>
<MDBNav class="nav-pills nav-fill">
  <MDBNavItem>
    <MDBNavLink active href="#!">Active</MDBNavLink>
  </MDBNavItem>
  <MDBNavItem>
    <MDBNavLink href="#!">Longer nav link</MDBNavLink>
  </MDBNavItem>
  <MDBNavItem>
    <MDBNavLink href="#!">Link</MDBNavLink>
  </MDBNavItem>
  <MDBNavItem>
    <MDBNavLink disabled href="#!">Disabled</MDBNavLink>
  </MDBNavItem>
</MDBNav>