Skip to content

nav.md

Latest commit

 

History

History
140 lines (108 loc) · 2.93 KB

nav.md

File metadata and controls

140 lines (108 loc) · 2.93 KB

Nav

I forgot how this works tbh

Here's a basic markup

<div class="nav">
  <ul class="nav-list">
    <li class="nav-item">
      <a href="#">
        <img class="nav-icon" data-src="icon-home.svg" />
        <span class="nav-item-text">Item</span>
      </a>
    </li>
    <li class="nav-item">
      <span data-toggle-dropdown>
        <img class="nav-icon" data-src="icon-projects.svg" />
        <span class="nav-item-text">Item but with dropdown</span>
        <ul class="dropdown" id="nav-demo-dropdown">
          <li><a href="#">Drop item</a></li>
          <li><a href="#">Drop item</a></li>
          <li><a href="#">Drop item</a></li>
        </ul>
      </span>
    </li>
    <li class="nav-item">
      <a href="#">
        <img class="nav-icon" data-src="icon-other.svg" />
        <span class="nav-item-text">Item</span>
      </a>
    </li>
    <li class="nav-item">
      <a href="#">
        <img class="nav-icon" data-src="icon-another.svg" />
        <span class="nav-item-text">Item</span>
      </a>
    </li>
  </ul>
</div>

.nav

container of the nav. On max mobile maximum, the nav items stack each other. .input and .btn instances within this will have custom vertical styles

.nav helpers

.nav-vertical

if a vertical layout is desired on all breakpoints, add a .nav-vertical to the block

<div class="nav nav-vertical"></div>

.nav-vertical works well with accordion as well... probably... i mean it should

.nav-sticky

This sticks the nav up top foREVER

add .offset-nav-sticky to any fixed element to offset from the sticky nav

.nav-list

Menu list in the .nav

Adding .nav-vertical to .nav incluences the layout

Dropdowns have custom styles within this class as well

<div class="nav">
  <ul class="nav-list">
    <!-- li items here -->
  </ul>
</div>

.nav-item

Menu list item

<div class="nav">
  <ul class="nav-list">
    <li class="nav-item"></li>
  </ul>
</div>

.nav-item-label

Label for a group of nav bitches

  • These bitches

.nav-icon

Icon you wanna use with a top level nav item. best with svgs

<div class="nav">
  <ul class="nav-list">
    <li class="nav-item">
      <img class="nav-icon" data-src="icon-other.svg" />
    </li>
  </ul>
</div>

.nav-item-text

The text... in the item

<div class="nav">
  <ul class="nav-list">
    <li class="nav-item">
      <a href="#">
        <img class="nav-icon" data-src="icon-other.svg" />
        <span class="nav-item-text">Item</span>
      </a>
    </li>
  </ul>
</div>

Back to TOC