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 Navbar
 
Svelte Navbar - Bootstrap 4 & Material Design
  
Bootstrap navbar is a horizontal navigation component which apart from traditional, text links, might embed icons,
    dropdowns, avatars or search forms.
 
MDB provides you with stylish Navbars, with distinctive for Material Design details (such as shadows, living
    colors or charming wave effects triggered by clicking on the link). Apart from traditional, text links, Bootstraps
    Navbar
    might embed regular & social icons, dropdowns, avatars or search forms.
 
Basic Example
   
 
 
<script>

  import {
    MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBFormInline,
    MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem
  } from "mdbsvelte";

  let isOpen = false;

  function toggleCollapse() {
    isOpen = !isOpen;
  }

  function handleUpdate(event) {
    isOpen = event.detail.isOpen;
  }

</script>
<MDBNavbar color="primary-color" dark expand="md">
  <MDBNavbarBrand>
    <strong class="white-text">Navbar</strong>
  </MDBNavbarBrand>
  <MDBNavbarToggler on:click={toggleCollapse}/>
  <MDBCollapse id="navbarCollapse3" {isOpen} navbar expand="md" on:update={handleUpdate}>
    <MDBNavbarNav left>
      <MDBNavItem active>
        <MDBNavLink to="#!">Home</MDBNavLink>
      </MDBNavItem>
      <MDBNavItem>
        <MDBNavLink to="#!">Features</MDBNavLink>
      </MDBNavItem>
      <MDBNavItem>
        <MDBNavLink to="#!">Pricing</MDBNavLink>
      </MDBNavItem>
      <MDBNavItem>
        <MDBDropdown>
          <MDBDropdownToggle nav caret>
            <span class="mr-2">Dropdown</span>
          </MDBDropdownToggle>
          <MDBDropdownMenu>
            <MDBDropdownItem href="#!">Action</MDBDropdownItem>
            <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
            <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
            <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
          </MDBDropdownMenu>
        </MDBDropdown>
      </MDBNavItem>
    </MDBNavbarNav>
    <MDBNavbarNav right>
      <MDBNavItem>

        <MDBFormInline waves>
          <div class="md-form my-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"/>
          </div>
        </MDBFormInline>
      </MDBNavItem>
    </MDBNavbarNav>
  </MDBCollapse>
</MDBNavbar>

 
Supported Content
   
 
 
<script>

  import {
    MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBDropdown,
    MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem, MDBIcon
  } from "mdbsvelte";

  let isOpen = true;

  function toggleCollapse() {
    isOpen = !isOpen;
  }
</script>
<MDBNavbar color="default-color" dark expand="md">
  <MDBNavbarBrand>
    <strong class="white-text">Navbar</strong>
  </MDBNavbarBrand>
  <MDBNavbarToggler on:click={toggleCollapse}/>
  <MDBCollapse id="navbarCollapse3" {isOpen} navbar>
    <MDBNavbarNav left>
      <MDBNavItem active>
        <MDBNavLink to="#!">Home</MDBNavLink>
      </MDBNavItem>
      <MDBNavItem>
        <MDBNavLink to="#!">Features</MDBNavLink>
      </MDBNavItem>
      <MDBNavItem>
        <MDBNavLink to="#!">Pricing</MDBNavLink>
      </MDBNavItem>
      <MDBNavItem>
        <MDBDropdown>
          <MDBDropdownToggle nav caret>
            <div class="d-none d-md-inline">Dropdown</div>
          </MDBDropdownToggle>
          <MDBDropdownMenu class="dropdown-default">
            <MDBDropdownItem href="#!">Action</MDBDropdownItem>
            <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
            <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
            <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
          </MDBDropdownMenu>
        </MDBDropdown>
      </MDBNavItem>
    </MDBNavbarNav>
    <MDBNavbarNav right>
      <MDBNavItem>
        <MDBNavLink class="waves-effect waves-light" to="#!">
          <MDBIcon fab icon="twitter"/>
        </MDBNavLink>
      </MDBNavItem>
      <MDBNavItem>
        <MDBNavLink class="waves-effect waves-light" to="#!">
          <MDBIcon fab icon="google-plus-g"/>
        </MDBNavLink>
      </MDBNavItem>
      <MDBNavItem>
        <MDBDropdown>
          <MDBDropdownToggle nav caret>
            <MDBIcon icon="user"/>
          </MDBDropdownToggle>
          <MDBDropdownMenu right class="dropdown-default">
            <MDBDropdownItem href="#!">Action</MDBDropdownItem>
            <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
            <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
            <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
          </MDBDropdownMenu>
        </MDBDropdown>
      </MDBNavItem>
    </MDBNavbarNav>
  </MDBCollapse>
</MDBNavbar>