Navbars

Navbars are complicated beasts. The thought here is that you're only going to build a couple of these (or only one) at any given time. So, customization and sub components are provided and... needed.

Standard Navbar

Note: modify navbar expand breakpoint by passing in expand: :size to the component. It will automatically utilize expand: :lg by default per docs.

= ui.nfg :navbar, class: 'my-4' do
  = ui.nfg :navbar_brand, body: 'Brand V. Centered', href: '#test_url', align_items: :center
  = ui.nfg :navbar_toggler, collapse: '#test_navbar'
  = ui.nfg :collapse, :navbar, id: 'test_navbar' do
    = ui.nfg :navbar_nav, align_items: :center do
      = ui.nfg :nav_item, :remote, body: 'Nav Item #1', href: '#', active: true, tooltip: 'Nav Item 1 Tooltip'
      = ui.nfg :nav_item, :remote, body: 'Nav Item #2', href: '#', tooltip: 'Nav Item 2 Tooltip'
      = ui.nfg :nav_item, :remote, body: 'Nav Item #3', href: '#', tooltip: 'Nav Item 3 Tooltip'
      = ui.nfg :nav_item, :remote, :disabled, body: 'Nav Item Disabled', href: '#', tooltip: 'Nav Item Disabled Tooltip'
      = ui.nfg :nav_item, button: 'Nav Item #4 with Dropdown', dropdown: true do
        = ui.nfg :dropdown_menu do
          = ui.nfg :dropdown_item, :remote, body: 'Dropdown Item 1', href: '#dd1'
          = ui.nfg :dropdown_item, :remote, body: 'Dropdown Item 2', href: '#dd2'
          = ui.nfg :dropdown_item, :remote, body: 'Dropdown Item 3', href: '#dd3'
          = ui.nfg :dropdown_item, :remote, body: 'Dropdown Item 4', href: '#dd4'
    = ui.nfg :navbar_text, body: 'Some Navbar Text'

<nav class="navbar my-4 bg-light navbar-expand-lg navbar-light"><a class="navbar-brand d-flex align-items-center" href="#test_url">Brand V. Centered</a><button class="navbar-toggler" data-toggle="collapse" data-target="#test_navbar" aria-expanded="false" aria-controls="test_navbar" role="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="test_navbar">
    <ul class="navbar-nav mr-auto d-flex align-items-center">
      <li class="nav-item" data-toggle="tooltip" data-placement="top" data-html="true" title="Nav Item 1 Tooltip"><a class="nav-link active" data-remote="true" href="#">Nav Item #1</a></li>
      <li class="nav-item" data-toggle="tooltip" data-placement="top" data-html="true" title="Nav Item 2 Tooltip"><a class="nav-link" data-remote="true" href="#">Nav Item #2</a></li>
      <li class="nav-item" data-toggle="tooltip" data-placement="top" data-html="true" title="Nav Item 3 Tooltip"><a class="nav-link" data-remote="true" href="#">Nav Item #3</a></li>
      <li class="nav-item disabled" tabindex="-1" style="pointer-events: none;"><a class="nav-link disabled" data-remote="true" href="#" tabindex="-1">Nav Item Disabled</a></li>
      <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" data-remote="true" href="#dd1">Dropdown Item 1</a><a class="dropdown-item" data-remote="true" href="#dd2">Dropdown Item 2</a><a class="dropdown-item" data-remote="true" href="#dd3">Dropdown Item 3</a><a class="dropdown-item" data-remote="true" href="#dd4">Dropdown Item 4</a></div>
      </li>
    </ul>
    <span class="navbar-text">Some Navbar Text</span></div>
</nav>

Thematic navbars

navbar-light and navbar-dark are automatically added based on the selected theme. You can overwrite this by passing in either dark: true or light: true into the :navbar

= ui.nfg :navbar, :primary, class: 'my-4' do
  = ui.nfg :navbar_brand, body: 'Brand', href: '#test_url'
  = ui.nfg :navbar_toggler, collapse: '#test_navbar_primary'
  = ui.nfg :collapse, id: 'test_navbar_primary', navbar: true do
    = ui.nfg :navbar_nav do
      = ui.nfg :nav_item, body: 'Nav Item #1', href: '#', active: true
      = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
      = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
    = ui.nfg :navbar_text, body: 'Some Navbar Text'

<nav class="navbar my-4 bg-primary navbar-expand-lg navbar-dark"><a class="navbar-brand" href="#test_url">Brand</a><button class="navbar-toggler" data-toggle="collapse" data-target="#test_navbar_primary" aria-expanded="false" aria-controls="test_navbar_primary" role="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="test_navbar_primary">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link active" href="#">Nav Item #1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
    </ul>
    <span class="navbar-text">Some Navbar Text</span></div>
</nav>

= ui.nfg :navbar, :secondary, class: 'my-4' do
  = ui.nfg :navbar_brand, body: 'Brand', href: '#test_url'
  = ui.nfg :navbar_toggler, collapse: '#test_navbar_secondary'
  = ui.nfg :collapse, id: 'test_navbar_secondary', navbar: true do
    = ui.nfg :navbar_nav do
      = ui.nfg :nav_item, body: 'Nav Item #1', href: '#', active: true
      = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
      = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
    = ui.nfg :navbar_text, body: 'Some Navbar Text'

<nav class="navbar my-4 bg-secondary navbar-expand-lg navbar-dark"><a class="navbar-brand" href="#test_url">Brand</a><button class="navbar-toggler" data-toggle="collapse" data-target="#test_navbar_secondary" aria-expanded="false" aria-controls="test_navbar_secondary" role="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="test_navbar_secondary">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link active" href="#">Nav Item #1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
    </ul>
    <span class="navbar-text">Some Navbar Text</span></div>
</nav>

= ui.nfg :navbar, :success, class: 'my-4' do
  = ui.nfg :navbar_brand, body: 'Brand', href: '#test_url'
  = ui.nfg :navbar_toggler, collapse: '#test_navbar_success'
  = ui.nfg :collapse, id: 'test_navbar_success', navbar: true do
    = ui.nfg :navbar_nav do
      = ui.nfg :nav_item, body: 'Nav Item #1', href: '#', active: true
      = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
      = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
    = ui.nfg :navbar_text, body: 'Some Navbar Text'

<nav class="navbar my-4 bg-success navbar-expand-lg navbar-dark"><a class="navbar-brand" href="#test_url">Brand</a><button class="navbar-toggler" data-toggle="collapse" data-target="#test_navbar_success" aria-expanded="false" aria-controls="test_navbar_success" role="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="test_navbar_success">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link active" href="#">Nav Item #1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
    </ul>
    <span class="navbar-text">Some Navbar Text</span></div>
</nav>

= ui.nfg :navbar, :danger, class: 'my-4' do
  = ui.nfg :navbar_brand, body: 'Brand', href: '#test_url'
  = ui.nfg :navbar_toggler, collapse: '#test_navbar_danger'
  = ui.nfg :collapse, id: 'test_navbar_danger', navbar: true do
    = ui.nfg :navbar_nav do
      = ui.nfg :nav_item, body: 'Nav Item #1', href: '#', active: true
      = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
      = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
    = ui.nfg :navbar_text, body: 'Some Navbar Text'

<nav class="navbar my-4 bg-danger navbar-expand-lg navbar-dark"><a class="navbar-brand" href="#test_url">Brand</a><button class="navbar-toggler" data-toggle="collapse" data-target="#test_navbar_danger" aria-expanded="false" aria-controls="test_navbar_danger" role="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="test_navbar_danger">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link active" href="#">Nav Item #1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
    </ul>
    <span class="navbar-text">Some Navbar Text</span></div>
</nav>

= ui.nfg :navbar, :info, class: 'my-4' do
  = ui.nfg :navbar_brand, body: 'Brand', href: '#test_url'
  = ui.nfg :navbar_toggler, collapse: '#test_navbar_info'
  = ui.nfg :collapse, id: 'test_navbar_info', navbar: true do
    = ui.nfg :navbar_nav do
      = ui.nfg :nav_item, body: 'Nav Item #1', href: '#', active: true
      = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
      = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
    = ui.nfg :navbar_text, body: 'Some Navbar Text'

<nav class="navbar my-4 bg-info navbar-expand-lg navbar-dark"><a class="navbar-brand" href="#test_url">Brand</a><button class="navbar-toggler" data-toggle="collapse" data-target="#test_navbar_info" aria-expanded="false" aria-controls="test_navbar_info" role="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="test_navbar_info">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link active" href="#">Nav Item #1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
    </ul>
    <span class="navbar-text">Some Navbar Text</span></div>
</nav>

= ui.nfg :navbar, :light, class: 'my-4' do
  = ui.nfg :navbar_brand, body: 'Brand', href: '#test_url'
  = ui.nfg :navbar_toggler, collapse: '#test_navbar_light'
  = ui.nfg :collapse, id: 'test_navbar_light', navbar: true do
    = ui.nfg :navbar_nav do
      = ui.nfg :nav_item, body: 'Nav Item #1', href: '#', active: true
      = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
      = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
    = ui.nfg :navbar_text, body: 'Some Navbar Text'

<nav class="navbar my-4 bg-light navbar-expand-lg navbar-light"><a class="navbar-brand" href="#test_url">Brand</a><button class="navbar-toggler" data-toggle="collapse" data-target="#test_navbar_light" aria-expanded="false" aria-controls="test_navbar_light" role="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="test_navbar_light">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link active" href="#">Nav Item #1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
    </ul>
    <span class="navbar-text">Some Navbar Text</span></div>
</nav>

= ui.nfg :navbar, :dark, class: 'my-4' do
  = ui.nfg :navbar_brand, body: 'Brand', href: '#test_url'
  = ui.nfg :navbar_toggler, collapse: '#test_navbar_dark'
  = ui.nfg :collapse, id: 'test_navbar_dark', navbar: true do
    = ui.nfg :navbar_nav do
      = ui.nfg :nav_item, body: 'Nav Item #1', href: '#', active: true
      = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
      = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
    = ui.nfg :navbar_text, body: 'Some Navbar Text'

<nav class="navbar my-4 bg-dark navbar-expand-lg navbar-dark"><a class="navbar-brand" href="#test_url">Brand</a><button class="navbar-toggler" data-toggle="collapse" data-target="#test_navbar_dark" aria-expanded="false" aria-controls="test_navbar_dark" role="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="test_navbar_dark">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link active" href="#">Nav Item #1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
    </ul>
    <span class="navbar-text">Some Navbar Text</span></div>
</nav>

Traited

= ui.nfg :navbar, :white, class: 'my-4' do
  = ui.nfg :navbar_brand, body: 'Brand', href: '#test_url'
  = ui.nfg :navbar_toggler, collapse: '#test_navbar_secondary'
  = ui.nfg :collapse, id: 'test_navbar_secondary', navbar: true do
    = ui.nfg :navbar_nav do
      = ui.nfg :nav_item, body: 'Nav Item #1', href: '#', active: true
      = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
      = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
    = ui.nfg :navbar_text, body: 'Some Navbar Text'

<nav class="navbar my-4 bg-white navbar-expand-lg navbar-light"><a class="navbar-brand" href="#test_url">Brand</a><button class="navbar-toggler" data-toggle="collapse" data-target="#test_navbar_secondary" aria-expanded="false" aria-controls="test_navbar_secondary" role="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="test_navbar_secondary">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link active" href="#">Nav Item #1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
    </ul>
    <span class="navbar-text">Some Navbar Text</span></div>
</nav>

Manually overridden dark/light

= ui.nfg :navbar, :dark, light: true, class: 'my-4' do
  = ui.nfg :navbar_brand, body: 'Brand', href: '#test_url'
  = ui.nfg :navbar_toggler, collapse: '#test_navbar_light_override'
  = ui.nfg :collapse, id: 'test_navbar_light_override', navbar: true do
    = ui.nfg :navbar_nav do
      = ui.nfg :nav_item, body: 'Nav Item #1', href: '#', active: true
      = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
      = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
    = ui.nfg :navbar_text, body: 'Some Navbar Text'

<nav class="navbar my-4 bg-dark navbar-expand-lg navbar-light"><a class="navbar-brand" href="#test_url">Brand</a><button class="navbar-toggler" data-toggle="collapse" data-target="#test_navbar_light_override" aria-expanded="false" aria-controls="test_navbar_light_override" role="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="test_navbar_light_override">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link active" href="#">Nav Item #1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
    </ul>
    <span class="navbar-text">Some Navbar Text</span></div>
</nav>

= ui.nfg :navbar, :light, dark: true, class: 'my-4' do
  = ui.nfg :navbar_brand, body: 'Brand', href: '#test_url'
  = ui.nfg :navbar_toggler, collapse: '#test_navbar_dark_override'
  = ui.nfg :collapse, id: 'test_navbar_dark_override', navbar: true do
    = ui.nfg :navbar_nav do
      = ui.nfg :nav_item, body: 'Nav Item #1', href: '#', active: true
      = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
      = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
    = ui.nfg :navbar_text, body: 'Some Navbar Text'

<nav class="navbar my-4 bg-light navbar-expand-lg navbar-dark"><a class="navbar-brand" href="#test_url">Brand</a><button class="navbar-toggler" data-toggle="collapse" data-target="#test_navbar_dark_override" aria-expanded="false" aria-controls="test_navbar_dark_override" role="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="test_navbar_dark_override">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link active" href="#">Nav Item #1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
    </ul>
    <span class="navbar-text">Some Navbar Text</span></div>
</nav>

Horizontal Alignment

Note, left is implemented by default

= ui.nfg :navbar, class: 'my-4' do
  = ui.nfg :navbar_brand, body: 'Brand', href: '#test_url'
  = ui.nfg :navbar_toggler, collapse: '#test_navbar_horizontal_alignment'
  = ui.nfg :collapse, id: 'test_navbar_horizontal_alignment', navbar: true do
    = ui.nfg :navbar_text, body: 'Some Navbar Text'
    = ui.nfg :navbar_nav, :right do
      = ui.nfg :nav_item, body: 'Nav Item #1', href: '#', active: true
      = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
      = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
      = ui.nfg :nav_item, body: 'Nav Item #4', href: '#'

<nav class="navbar my-4 bg-light navbar-expand-lg navbar-light"><a class="navbar-brand" href="#test_url">Brand</a><button class="navbar-toggler" data-toggle="collapse" data-target="#test_navbar_horizontal_alignment" aria-expanded="false" aria-controls="test_navbar_horizontal_alignment" role="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="test_navbar_horizontal_alignment"><span class="navbar-text">Some Navbar Text</span>
    <ul class="navbar-nav ml-auto" right="true">
      <li class="nav-item"><a class="nav-link active" href="#">Nav Item #1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #4</a></li>
    </ul>
  </div>
</nav>

Affixed and Sticky

Sticky Top

See commented code :)

= ui.nfg :navbar, class: 'my-4' do
  = ui.nfg :navbar_brand, body: 'Brand', href: '#test_url'
  = ui.nfg :navbar_toggler, collapse: '#test_navbar_horizontal_alignment'
  = ui.nfg :collapse, id: 'test_navbar_horizontal_alignment', navbar: true do
    = ui.nfg :navbar_text, body: 'Some Navbar Text'
    = ui.nfg :navbar_nav, :right do
      = ui.nfg :nav_item, body: 'Nav Item #1', href: '#', active: true
      = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
      = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
      = ui.nfg :nav_item, body: 'Nav Item #4', href: '#'

<nav class="navbar my-4 bg-light navbar-expand-lg navbar-light"><a class="navbar-brand" href="#test_url">Brand</a><button class="navbar-toggler" data-toggle="collapse" data-target="#test_navbar_horizontal_alignment" aria-expanded="false" aria-controls="test_navbar_horizontal_alignment" role="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="test_navbar_horizontal_alignment"><span class="navbar-text">Some Navbar Text</span>
    <ul class="navbar-nav ml-auto" right="true">
      <li class="nav-item"><a class="nav-link active" href="#">Nav Item #1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #4</a></li>
    </ul>
  </div>
</nav>

Fixed Top

See commented code :)

= ui.nfg :navbar, fixed: :top, class: 'my-4' do
  = ui.nfg :navbar_brand, body: 'Brand', href: '#test_url'
  = ui.nfg :navbar_toggler, collapse: '#test_navbar_horizontal_alignment'
  = ui.nfg :collapse, id: 'test_navbar_horizontal_alignment', navbar: true do
    = ui.nfg :navbar_nav, :right do
      = ui.nfg :nav_item, body: 'Nav Item #1', href: '#', active: true
      = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
      = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
      = ui.nfg :nav_item, body: 'Nav Item #4', href: '#'

<nav class="navbar my-4 bg-light navbar-expand-lg navbar-light fixed-top" fixed="top"><a class="navbar-brand" href="#test_url">Brand</a><button class="navbar-toggler" data-toggle="collapse" data-target="#test_navbar_horizontal_alignment" aria-expanded="false" aria-controls="test_navbar_horizontal_alignment" role="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="test_navbar_horizontal_alignment">
    <ul class="navbar-nav ml-auto" right="true">
      <li class="nav-item"><a class="nav-link active" href="#">Nav Item #1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #4</a></li>
    </ul>
  </div>
</nav>

Fixed Bottom

See commented code :)

= ui.nfg :navbar, fixed: :bottom, class: 'my-4' do
  = ui.nfg :navbar_brand, body: 'Brand', href: '#test_url'
  = ui.nfg :navbar_toggler, collapse: '#test_navbar_horizontal_alignment'
  = ui.nfg :collapse, id: 'test_navbar_horizontal_alignment', navbar: true do
    = ui.nfg :navbar_nav, :right do
      = ui.nfg :nav_item, body: 'Nav Item #1', href: '#', active: true
      = ui.nfg :nav_item, body: 'Nav Item #2', href: '#'
      = ui.nfg :nav_item, body: 'Nav Item #3', href: '#'
      = ui.nfg :nav_item, body: 'Nav Item #4', href: '#'

<nav class="navbar my-4 bg-light navbar-expand-lg navbar-light fixed-bottom" fixed="bottom"><a class="navbar-brand" href="#test_url">Brand</a><button class="navbar-toggler" data-toggle="collapse" data-target="#test_navbar_horizontal_alignment" aria-expanded="false" aria-controls="test_navbar_horizontal_alignment" role="button"><span class="navbar-toggler-icon"></span></button>
  <div class="collapse navbar-collapse" id="test_navbar_horizontal_alignment">
    <ul class="navbar-nav ml-auto" right="true">
      <li class="nav-item"><a class="nav-link active" href="#">Nav Item #1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #3</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Nav Item #4</a></li>
    </ul>
  </div>
</nav>