Doghouse UiKit

15.1 #Sidebar.slideout Slideout sidebar

A slideout sidebar will stay hidden until triggered to open by JS changing a class. It is commonly used for nav and can slide out from the left or right. See duk-sidebar-slideout(), duk-sidebar-slideout--open() and duk-sidebar-slideout--reset()

By default it uses fixed position but in this example it is overriden to use absolute.

Examples

Default styling

Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie dessert sugar plum toffee marzipan bonbon sesame snaps halvah. Macaroon croissant sweet cheesecake. Croissant icing muffin. Gingerbread pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear claw tootsie roll jujubes.

.duk-sidebar-slideout--open

Open sidebar

Markup

<div class="duk-position--relative">
  <div class="duk-sidebar-slideout [modifier class] duk-position--absolute">
    <div class="duk-sidebar-slideout__content">
      <ul>
         <li>Sidebar link</li>
         <li>Sidebar link</li>
         <li>Sidebar link</li>
      </ul>
    </div>
  </div>
  <p>Liquorice fruitcake lollipop. Sesame snaps muffin gummies cake. Apple pie
  dessert sugar plum toffee <a href="#">marzipan bonbon sesame</a> snaps halvah.
  Macaroon croissant sweet cheesecake. <em>Croissant icing</em> muffin. Gingerbread
  pudding halvah bonbon chupa chups bonbon sugar plum fruitcake ice cream. Bear
  claw <u>tootsie roll jujubes</u>.</p>
</div>

Source: scss/objects/_sidebar.scss, line 4