Svelte Bootstrap Dropdowns

Svelte Dropdowns - Bootstrap 4 & Material Design

Overview

Svelte Bootstrap dropdown is a toggleable menu embedding additional links or content. It allows you to construct advanced navigation and link categorization.

In case of more complicated navigations systems dropdowns are the essential elements providing you with possibility of placing all the most relevant links in our navigation bar (or other component acting as navigation - such as SideNav)

Aside from being not only highly functional, MDB dropdowns are also extraordinary visually attractive. It gives them this characteristic Material Design effects, like shadows, living colors or charming waves effect after opening a link.

They’re toggled by clicking, not by hovering; this is an intentional design decision. Why?

MDB is "mobile first" framework so, we avoid mixing functional elements and interaction by hovering because it decreases User Experience of users of mobile devices.

Google Material Design guidelines recommend the same approach.

<script>
  import {MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem} from "mdbsvelte";
</script>
<MDBDropdown>
  <MDBDropdownToggle caret color="primary">
    MDBDropdown
  </MDBDropdownToggle>
  <MDBDropdownMenu>
    <MDBDropdownItem>Action</MDBDropdownItem>
    <MDBDropdownItem>Another Action</MDBDropdownItem>
    <MDBDropdownItem>Something else here</MDBDropdownItem>
    <MDBDropdownItem divider/>
    <MDBDropdownItem>Separated link</MDBDropdownItem>
  </MDBDropdownMenu>
</MDBDropdown>

Split button

<script>
  import {MDBBtnGroup, MDBBtn, MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem} from "mdbsvelte";
</script>
<MDBBtnGroup>
  <MDBBtn color="danger" class="m-0">
    DANGER
  </MDBBtn>
  <MDBDropdown>
    <MDBDropdownToggle caret color="danger" class="m-0"/>
    <MDBDropdownMenu color="danger">
      <MDBDropdownItem>Action</MDBDropdownItem>
      <MDBDropdownItem>Another Action</MDBDropdownItem>
      <MDBDropdownItem>Something else here</MDBDropdownItem>
      <MDBDropdownItem>Something else here</MDBDropdownItem>
    </MDBDropdownMenu>
  </MDBDropdown>
</MDBBtnGroup>

Sizing

Button dropdowns work with buttons of all sizes

<script>
  import {MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem} from "mdbsvelte";

</script>

<MDBDropdown size="lg">
  <MDBDropdownToggle caret color="danger">
    Large button
  </MDBDropdownToggle>
  <MDBDropdownMenu color="danger" basic>
    <MDBDropdownItem>Action</MDBDropdownItem>
    <MDBDropdownItem>Another Action</MDBDropdownItem>
    <MDBDropdownItem>Something else here</MDBDropdownItem>
    <MDBDropdownItem>Something else here</MDBDropdownItem>
  </MDBDropdownMenu>
</MDBDropdown>
<MDBDropdown size="sm">
  <MDBDropdownToggle caret color="danger">
    Small button
  </MDBDropdownToggle>
  <MDBDropdownMenu color="danger" basic>
    <MDBDropdownItem>Action</MDBDropdownItem>
    <MDBDropdownItem>Another Action</MDBDropdownItem>
    <MDBDropdownItem>Something else here</MDBDropdownItem>
    <MDBDropdownItem>Something else here</MDBDropdownItem>
  </MDBDropdownMenu>
</MDBDropdown>

Dropup variation

Trigger dropdown menus above elements by adding dropup prop to the parent.

<script>
  import {MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem} from "mdbsvelte";
</script>
<MDBDropdown dropup>
  <MDBDropdownToggle caret color="primary">
    Dropup
  </MDBDropdownToggle>
  <MDBDropdownMenu>
    <MDBDropdownItem>Action</MDBDropdownItem>
    <MDBDropdownItem>Another Action</MDBDropdownItem>
    <MDBDropdownItem>Something else here</MDBDropdownItem>
    <MDBDropdownItem divider/>
    <MDBDropdownItem>Separated link</MDBDropdownItem>
  </MDBDropdownMenu>
</MDBDropdown>

Dropright variation

Trigger dropdown menus on the right side by adding dropright prop to the parent.

<script>
  import {MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem} from "mdbsvelte";
</script>
<MDBDropdown dropright>
  <MDBDropdownToggle caret color="primary">
    Dropright
  </MDBDropdownToggle>
  <MDBDropdownMenu>
    <MDBDropdownItem>Action</MDBDropdownItem>
    <MDBDropdownItem>Another Action</MDBDropdownItem>
    <MDBDropdownItem>Something else here</MDBDropdownItem>
    <MDBDropdownItem divider/>
    <MDBDropdownItem>Separated link</MDBDropdownItem>
  </MDBDropdownMenu>
</MDBDropdown>

Dropleft variation

Trigger dropdown menus on the left side by adding dropleft prop to the parent.

<script>
  import {MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem} from "mdbsvelte";
</script>
<MDBDropdown dropleft>
  <MDBDropdownToggle caret color="primary">
    Dropleft
  </MDBDropdownToggle>
  <MDBDropdownMenu>
    <MDBDropdownItem>Action</MDBDropdownItem>
    <MDBDropdownItem>Another Action</MDBDropdownItem>
    <MDBDropdownItem>Something else here</MDBDropdownItem>
    <MDBDropdownItem divider/>
    <MDBDropdownItem>Separated link</MDBDropdownItem>
  </MDBDropdownMenu>
</MDBDropdown>

Alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add right prop to a <MDBDropdownMenu> component to right align the dropdown menu.

<script>
  import {MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem} from "mdbsvelte";
</script>
<MDBDropdown>
  <MDBDropdownToggle caret color="primary">
    This dropdown&apos;s menu is right-aligned
  </MDBDropdownToggle>
  <MDBDropdownMenu right basic>
    <MDBDropdownItem>Action</MDBDropdownItem>
    <MDBDropdownItem>Another Action</MDBDropdownItem>
    <MDBDropdownItem>Something else here</MDBDropdownItem>
  </MDBDropdownMenu>
</MDBDropdown>

Menu headers

Add a header to label sections of actions in any dropdown menu.

<script>
  import {MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem} from "mdbsvelte";
</script>
<MDBDropdown>
  <MDBDropdownToggle caret color="primary">
    MDBDropdown
  </MDBDropdownToggle>
  <MDBDropdownMenu>
    <MDBDropdownItem header>MDBDropdown header</MDBDropdownItem>
    <MDBDropdownItem>Action</MDBDropdownItem>
    <MDBDropdownItem>Another Action</MDBDropdownItem>
    <MDBDropdownItem>Something else here</MDBDropdownItem>
  </MDBDropdownMenu>
</MDBDropdown>

Menu dividers

Separate groups of related menu items with a divider.

<script>
  import {MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem} from "mdbsvelte";
</script>
<MDBDropdown>
  <MDBDropdownToggle caret color="primary">
    MDBDropdown
  </MDBDropdownToggle>
  <MDBDropdownMenu>
    <MDBDropdownItem>Action</MDBDropdownItem>
    <MDBDropdownItem>Another Action</MDBDropdownItem>
    <MDBDropdownItem>Something else here</MDBDropdownItem>
    <MDBDropdownItem divider/>
    <MDBDropdownItem>Separated link</MDBDropdownItem>
  </MDBDropdownMenu>
</MDBDropdown>

Disabled menu items

Add .disabled to items in the dropdown to style them as disabled.

<script>
  import {MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem} from "mdbsvelte";
</script>
<MDBDropdown>
  <MDBDropdownToggle caret color="primary">
    MDBDropdown
  </MDBDropdownToggle>
  <MDBDropdownMenu>
    <MDBDropdownItem>Regular link</MDBDropdownItem>
    <MDBDropdownItem disabled href="#">
      Disabled link
    </MDBDropdownItem>
    <MDBDropdownItem href="#">Another link</MDBDropdownItem>
  </MDBDropdownMenu>
</MDBDropdown>

Active menu items

Add active to items in the dropdown to style them as active.

<script>
  import {MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem} from "mdbsvelte";
</script>
<MDBDropdown>
  <MDBDropdownToggle caret color="primary">
    MDBDropdown
  </MDBDropdownToggle>
  <MDBDropdownMenu>
    <MDBDropdownItem>Regular link</MDBDropdownItem>
    <MDBDropdownItem active href="#">
      Acrive link
    </MDBDropdownItem>
    <MDBDropdownItem href="#">Another link</MDBDropdownItem>
  </MDBDropdownMenu>
</MDBDropdown>

No Preview