Navs

Standard, default nav

Note: to generate a nav item that utilizes the :nav_link component, simply pass an :href option into the :nav_item. This will automatically generate the .nav-item > .nav-link syntax and supply the href to the nav_link for you.

Example: ui.nfg :nav_item, body: 'Nav Item #1', href: '#'

:nav_link component is available and is usable if you need to build a more complex or complicated nav item. See examples below

= ui.nfg :nav, class: 'bg-light p-3' do
  = ui.nfg :nav_item, :active, body: 'Nav Item #1', href: '#', icon: 'home'
<ul class="nav bg-light p-3">
  <li class="nav-item"><a class="nav-link active" href="#"><i aria-hidden="true" class="fa fa-home mr-1"></i> Nav Item #1</a></li>
</ul>
= ui.nfg :nav, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #2', href: '#', icon: 'rocket'
<ul class="nav bg-light p-3">
  <li class="nav-item"><a class="nav-link" href="#"><i aria-hidden="true" class="fa fa-rocket mr-1"></i> Nav Item #2</a></li>
</ul>
= ui.nfg :nav, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #3', href: '#', icon: 'rocket'
<ul class="nav bg-light p-3">
  <li class="nav-item"><a class="nav-link" href="#"><i aria-hidden="true" class="fa fa-rocket mr-1"></i> Nav Item #3</a></li>
</ul>
= ui.nfg :nav, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #4', href: '#', icon: 'heart'
<ul class="nav bg-light p-3">
  <li class="nav-item"><a class="nav-link" href="#"><i aria-hidden="true" class="fa fa-heart mr-1"></i> Nav Item #4</a></li>
</ul>

Nav with :nav_items and manually added :nav_links

= ui.nfg :nav, class: 'bg-light p-3' do
  = ui.nfg :nav_item do
    = ui.nfg :nav_link, :active, body: 'Nav Link #1', href: '#', icon: 'home'
<ul class="nav bg-light p-3">
  <li class="nav-item"><a class="nav-link active" href="#"><i aria-hidden="true" class="fa fa-home mr-1"></i> Nav Link #1</a></li>
</ul>
= ui.nfg :nav, class: 'bg-light p-3' do
  = ui.nfg :nav_item do
    = ui.nfg :nav_link, body: 'Nav Link #2', href: '#', icon: 'rocket'
<ul class="nav bg-light p-3">
  <li class="nav-item"><a class="nav-link" href="#"><i aria-hidden="true" class="fa fa-rocket mr-1"></i> Nav Link #2</a></li>
</ul>
= ui.nfg :nav, class: 'bg-light p-3' do
  = ui.nfg :nav_item do
    = ui.nfg :nav_link, body: 'Nav Link #3', href: '#', icon: 'heart'
<ul class="nav bg-light p-3">
  <li class="nav-item"><a class="nav-link" href="#"><i aria-hidden="true" class="fa fa-heart mr-1"></i> Nav Link #3</a></li>
</ul>
= ui.nfg :nav, class: 'bg-light p-3' do
  = ui.nfg :nav_item do
    = ui.nfg :nav_link, :disabled, body: 'Nav Link #4 (disabled)', href: '#', icon: 'usd'
<ul class="nav bg-light p-3">
  <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1"><i aria-hidden="true" class="fa fa-usd mr-1"></i> Nav Link #4 (disabled)</a></li>
</ul>

Docs show that when using nav element, utilize :nav_link (a tag) component

Standard nav using as: :nav (thus, nav element)

= ui.nfg :nav, as: :nav, class: 'bg-light p-3' do
  = ui.nfg :nav_link, body: 'Nav Link #1', href: '#'
<nav class="nav bg-light p-3"><a class="nav-link" href="#">Nav Link #1</a></nav>
= ui.nfg :nav, as: :nav, class: 'bg-light p-3' do
  = ui.nfg :nav_link, body: 'Nav Link #2', href: '#'
<nav class="nav bg-light p-3"><a class="nav-link" href="#">Nav Link #2</a></nav>
= ui.nfg :nav, as: :nav, class: 'bg-light p-3' do
  = ui.nfg :nav_link, body: 'Nav Link #3', href: '#'
<nav class="nav bg-light p-3"><a class="nav-link" href="#">Nav Link #3</a></nav>
- ui.nfg :nav, as: :nav, class: 'bg-light p-3' do
  - ui.nfg :nav_link, body: 'Nav Link #4', href: '#'
<nav class="nav bg-light p-3"><a class="nav-link" href="#">Nav Link #4</a></nav>

Complex nav using as: :nav

Per documentation on nav-fill / justified, etc, add 'nav-item' class to nav_link:

= ui.nfg :nav, :fill, :pill, as: :nav, class: 'bg-light p-3' do
  = ui.nfg :nav_link, :active, body: 'Nav Link #1 - Active', href: '#', class: 'nav-item'
<nav class="nav bg-light p-3 nav-fill nav-pills"><a class="nav-link nav-item active" href="#">Nav Link #1 - Active</a></nav>
= ui.nfg :nav, :fill, :pill, as: :nav, class: 'bg-light p-3' do
  = ui.nfg :nav_link, body: 'Nav Link #2', href: '#', class: 'nav-item'
<nav class="nav bg-light p-3 nav-fill nav-pills"><a class="nav-link nav-item" href="#">Nav Link #2</a></nav>
= ui.nfg :nav, :fill, :pill, as: :nav, class: 'bg-light p-3' do
  = ui.nfg :nav_link, body: 'Nav Link #3', href: '#', class: 'nav-item'
<nav class="nav bg-light p-3 nav-fill nav-pills"><a class="nav-link nav-item" href="#">Nav Link #3</a></nav>
= ui.nfg :nav, :fill, :pill, as: :nav, class: 'bg-light p-3' do
  = ui.nfg :nav_link, body: 'Nav Link #4', href: '#', class: 'nav-item'
<nav class="nav bg-light p-3 nav-fill nav-pills"><a class="nav-link nav-item" href="#">Nav Link #4</a></nav>

Horizontal positioning of nav

Right

= ui.nfg :nav, :right, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #1', href: '#'
<ul class="nav bg-light p-3 justify-content-end">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #1</a></li>
</ul>
= ui.nfg :nav, :right, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'`
<ul class="nav bg-light p-3 justify-content-end">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
</ul>
= ui.nfg :nav, :right, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
<ul class="nav bg-light p-3 justify-content-end">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
</ul>
= ui.nfg :nav, :right, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #4' , href: '#'
<ul class="nav bg-light p-3 justify-content-end">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #4</a></li>
</ul>

Center

= ui.nfg :nav, :center, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #1', href: '#'
<ul class="nav bg-light p-3 justify-content-center">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #1</a></li>
</ul>
= ui.nfg :nav, :center, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
<ul class="nav bg-light p-3 justify-content-center">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
</ul>
= ui.nfg :nav, :center, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
<ul class="nav bg-light p-3 justify-content-center">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
</ul>
= ui.nfg :nav, :center, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #4', href: '#'
<ul class="nav bg-light p-3 justify-content-center">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #4</a></li>
</ul>

Vertical

= ui.nfg :nav, :vertical, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #1', href: '#'
<ul class="nav bg-light p-3 flex-column">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #1</a></li>
</ul>
= ui.nfg :nav, :vertical, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
<ul class="nav bg-light p-3 flex-column">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
</ul>
= ui.nfg :nav, :vertical, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
<ul class="nav bg-light p-3 flex-column">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
</ul>
= ui.nfg :nav, :vertical, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #4', href: '#'

Tabs

= ui.nfg :nav, :tabs, class: 'bg-light px-3 pt-3' do
  = ui.nfg :nav_item, :active, body: 'Nav Item #1', href: '#'
<ul class="nav bg-light px-3 pt-3 nav-tabs" role="tablist">
  <li class="nav-item"><a class="nav-link active" href="#">Nav Item #1</a></li>
</ul>
= ui.nfg :nav, :tabs, class: 'bg-light px-3 pt-3' do
  = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
<ul class="nav bg-light px-3 pt-3 nav-tabs" role="tablist">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
</ul>
= ui.nfg :nav, :tabs, class: 'bg-light px-3 pt-3' do
  = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
<ul class="nav bg-light px-3 pt-3 nav-tabs" role="tablist">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
</ul>
= ui.nfg :nav, :tabs, class: 'bg-light px-3 pt-3' do
  = ui.nfg :nav_item, body: 'Nav Item #4', href: '#'
<ul class="nav bg-light px-3 pt-3 nav-tabs" role="tablist">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #4</a></li>
</ul>

Pills

= ui.nfg :nav, :pill, class: 'bg-light p-3' do
  = ui.nfg :nav_item, :active, body: 'Nav Item #1', href: '#'
<ul class="nav bg-light p-3 nav-pills">
  <li class="nav-item"><a class="nav-link active" href="#">Nav Item #1</a></li>
</ul>
= ui.nfg :nav, :pill, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
<ul class="nav bg-light p-3 nav-pills">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
</ul>
= ui.nfg :nav, :pill, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
<ul class="nav bg-light p-3 nav-pills">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
</ul>
= ui.nfg :nav, :pill, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #4', href: '#'
<ul class="nav bg-light p-3 nav-pills">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #4</a></li>
</ul>

Fill

= ui.nfg :nav, :fill, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #1', href: '#'
<ul class="nav bg-light p-3 nav-fill">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #1</a></li>
</ul>
= ui.nfg :nav, :fill, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
<ul class="nav bg-light p-3 nav-fill">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
</ul>
= ui.nfg :nav, :fill, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
<ul class="nav bg-light p-3 nav-fill">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
</ul>
= ui.nfg :nav, :fill, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #4', href: '#'
<ul class="nav bg-light p-3 nav-fill">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #4</a></li>
</ul>

Justify

= ui.nfg :nav, :justify, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #1', href: '#'
<ul class="nav bg-light p-3" justify="true">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #1</a></li>
</ul>
= ui.nfg :nav, :justify, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
<ul class="nav bg-light p-3" justify="true">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
</ul>
= ui.nfg :nav, :justify, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
<ul class="nav bg-light p-3" justify="true">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
</ul>
= ui.nfg :nav, :justify, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #4', href: '#'
<ul class="nav bg-light p-3" justify="true">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #4</a></li>
</ul>
= ui.nfg :nav, :justify, :pill, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #1', href: '#'
<ul class="nav bg-light p-3 nav-pills" justify="true">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #1</a></li>
</ul>
= ui.nfg :nav, :justify, :pill, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
<ul class="nav bg-light p-3 nav-pills" justify="true">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
</ul>
= ui.nfg :nav, :justify, :pill, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
<ul class="nav bg-light p-3 nav-pills" justify="true">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
</ul>
= ui.nfg :nav, :justify, :pill, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #4', href: '#'
= ui.nfg :nav, :justify, :tabs, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #1', href: '#'
<ul class="nav bg-light p-3 nav-tabs" justify="true" role="tablist">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #1</a></li>
</ul>
= ui.nfg :nav, :justify, :tabs, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
<ul class="nav bg-light p-3 nav-tabs" justify="true" role="tablist">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
</ul>
= ui.nfg :nav, :justify, :tabs, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
= ui.nfg :nav, :justify, :tabs, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #4', href: '#'
<ul class="nav bg-light p-3 nav-tabs" justify="true" role="tablist">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #4</a></li>
</ul>

Nav Items / links: States

= ui.nfg :nav, :pill ,class: 'bg-light p-3' do
  = ui.nfg :nav_item, :active, body: 'Nav Item #1 - Active', href: '#', icon: 'check'
<ul class="nav bg-light p-3 nav-pills">
  <li class="nav-item"><a class="nav-link active" href="#"><i aria-hidden="true" class="fa fa-check mr-1"></i> Nav Item #1 - Active</a></li>
</ul>
= ui.nfg :nav, :pill ,class: 'bg-light p-3' do
  = ui.nfg :nav_item, :disabled, body: 'Nav Item #2 - Disabled', href: '#'
<ul class="nav bg-light p-3 nav-pills">
  <li class="nav-item disabled" tabindex="-1"><a class="nav-link disabled" href="#" tabindex="-1">Nav Item #2 - Disabled</a></li>
</ul>
= ui.nfg :nav, :pill ,class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
<ul class="nav bg-light p-3 nav-pills">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
</ul>
= ui.nfg :nav, :pill ,class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #4', href: '#'
<ul class="nav bg-light p-3 nav-pills">
  <li class="nav-item"><a class="nav-link" href="#">Nav Item #4</a></li>
</ul>

Nav items with dropdowns

Note: to create an automatic dropdown toggle to power your dropdown, you need to pass in :button instead of :body

Example: = ui.nfg :nav_item, button: 'Nav Item #4 - Dropdown', dropdown: true do ...

Standard Nav with dropdown

= ui.nfg :nav, class: 'bg-light p-3' do
  = ui.nfg :nav_item, body: 'Nav Item #1', href: '#'
  = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
  = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
  = ui.nfg :nav_item, :dropdown, button: 'Nav Item #4 - Dropdown' do
    = ui.nfg :dropdown_menu do
      = ui.nfg :dropdown_item, :primary, body: 'Dropdown Item 1', href: '#', icon: 'pencil'
      = ui.nfg :dropdown_item, :secondary, body: 'Dropdown Item 2', href: '#', icon: 'trash'
      = ui.nfg :dropdown_item, :danger, body: 'Dropdown Item 3', href: '#', icon: 'ban'
      = ui.nfg :dropdown_item, :dark, body: 'Dropdown Item 4', href: '#', icon: 'envelope'
<ul class="nav bg-light p-3">
  <li class="nav-item dropdown"><a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">Nav Item #4 - Dropdown<i aria-hidden="true" class="fa fa-caret-down ml-1"></i></a>
    <div class="dropdown-menu"><a class="dropdown-item text-dark" href="#"><i aria-hidden="true" class="fa fa-envelope fa-fw text-center mr-1"></i> Dropdown Item 4</a></div>
  </li>
</ul>

Pills with dropdowns

= ui.nfg :nav, :pill, class: 'bg-light p-3' do
  = ui.nfg :nav_item, :active, body: 'Nav Item #1', href: '#'
  = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
  = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
  = ui.nfg :nav_item, :dropdown, button: 'Nav Item #4 - Dropdown' do
    = ui.nfg :dropdown_menu do
      = ui.nfg :dropdown_item, :primary, body: 'Dropdown Item 1', href: '#'
      = ui.nfg :dropdown_item, :secondary, body: 'Dropdown Item 2', href: '#'
      = ui.nfg :dropdown_item, :danger, body: 'Dropdown Item 3', href: '#'
      = ui.nfg :dropdown_item, :warning, body: 'Dropdown Item 4', href: '#'
<ul class="nav bg-light p-3 nav-pills">
  <li class="nav-item dropdown"><a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">Nav Item #4 - Dropdown<i aria-hidden="true" class="fa fa-caret-down ml-1"></i></a>
    <div class="dropdown-menu"><a class="dropdown-item text-warning" href="#">Dropdown Item 4</a></div>
  </li>
</ul>

Tabs with dropdowns

= ui.nfg :nav, :tabs, class: 'bg-light px-3 pt-3' do
  = ui.nfg :nav_item, body: 'Nav Item #1', href: '#'
  = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
  = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
  = ui.nfg :nav_item, :dropdown, button: 'Nav Item #4 with Dropdown' do
    = ui.nfg :dropdown_menu do
      = ui.nfg :dropdown_item, body: 'Dropdown Item 1', href: '#dd1'
      = ui.nfg :dropdown_item, body: 'Dropdown Item 2', href: '#dd2'
      = ui.nfg :dropdown_item, body: 'Dropdown Item 3', href: '#dd3'
      = ui.nfg :dropdown_item, body: 'Dropdown Item 4', href: '#dd4'
<ul class="nav bg-light px-3 pt-3 nav-tabs" role="tablist">
  <li class="nav-item dropdown"><a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">Nav Item #4 with Dropdown<i aria-hidden="true" class="fa fa-caret-down ml-1"></i></a>
    <div class="dropdown-menu"><a class="dropdown-item" href="#dd4">Dropdown Item 4</a></div>
  </li>
</ul>