Skip to content

Usage with Bootstrap 3

Jump to bottom
Manuel Meurer edited this page Jun 28, 2017 · 2 revisions

Version

These instructions are valid for the latest released version of the bootstrap-navbar gem.

Full example

Full example

= navbar fixed: :top do
  = navbar_header brand: 'My great app', brand_link: '/home'
  = navbar_collapse do
    = navbar_group class: 'foo', id: 'menu' do
      = navbar_text 'Pick an option:'
      = navbar_item "Home", '/'
      = navbar_item "About Us", '/about-us'
      = navbar_item '/contact' do
        %span.glyphicon.glyphicon-hand-right
        Contact Us!
      = navbar_dropdown "Stuff" do
        = navbar_dropdown_header 'Great stuff!'
        = navbar_item "One", '/one'
        = navbar_item "Two", '/two'
        = navbar_item "Three", '/three'
        - if true # check if user is admin, maybe like "if current_user.try(:admin?)"
          = navbar_dropdown_divider
          = navbar_item "Admin Dashboard", '/admin'
          = navbar_item "Users", '/admin/users'
    = navbar_group align: 'right' do
      - if true # check if user is logged in, maybe like "if current_user.present?"
        = navbar_item "Log Out", '/logout'
      - else
        = navbar_item "Log In", '/login'

generates:

<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsable">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="/home" class="navbar-brand">My great app</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapsable">
      <ul class="nav navbar-nav foo" id="menu">
        <p class="navbar-text">Pick an option:</p>
        <li class="active"><a href="/">Home</a></li>
        <li><a href="/about-us">About Us</a></li>
        <li>
          <a href="/contact">
            <span class='glyphicon glyphicon-hand-right'></span>
            Contact Us!
          </a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Stuff <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li class="dropdown-header">Great stuff!</li>
            <li><a href="/one">One</a></li>
            <li><a href="/two">Two</a></li>
            <li><a href="/three">Three</a></li>
            <li class="divider"></li>
            <li><a href="/admin">Admin Dashboard</a></li>
            <li><a href="/admin/users">Users</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right" align="right">
        <li><a href="/logout">Log Out</a></li>
      </ul>
    </div>
  </div>
</nav>

Methods

navbar

This method generates the navbar wrapper.

= navbar

generates:

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
  </div>
</nav>

The content of the navbar is supplied by the block and the available options.

By default the generated code includes a <div class="container">. If you don't want this, set the container option to false:

= navbar container: false

generates:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsable">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="collapse navbar-collapse" id="navbar-collapsable">
  </div>
</nav>

Since Bootstrap 3.1.0, a fluid container is supported that uses the maximum available width of the screen. To use this fluid container, set the container option to fluid:

= navbar container: 'fluid'

generates:

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsable">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapsable">
    </div>
  </div>
</nav>

navbar_header

This method generates the header part of the navbar.

= navbar_header

generates:

<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsable">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>

Options brand and brand_link autogenerate the brand link:

= navbar_header brand: 'My great app', brand_link: '/start'

generates:

<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsable">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a href="/start" class="navbar-brand">
    My great app
  </a>
</div>

If only brand is defined, brand_link defaults to /.

navbar_collapse

This method generates the collapsable part of the navbar.

= navbar_collapse

generates:

<div class="collapse navbar-collapse" id="navbar-collapsable">
</div>

navbar_text

This method generates some menu text, to be used in navbar_collapse.

= navbar_text 'Select a option:'

generates:

<p class="navbar-text">
  Select a option:
</p>

The content can alternatively be supplied in a block:

= navbar_text do
  Current country:
  = image_text 'flags/en.jpg'

generates:

<p class="navbar-text">
  Current country:
  <img src="/images/flags/en.jpg">
</p>

You can supply additional options to set classes and IDs

= navbar_text 'Select a option:', class: 'pull-right foo', id: 'bar'

generates:

<p class="navbar-text pull-right foo" id="bar">
  Select a option:
</p>

navbar_group

This method generates a menu group, to be used in navbar_collapse.

= navbar_group

generates:

<ul class="nav navbar-nav">
</ul>

The content of the menu group is supplied by the block:

= navbar_group do
  Yay!

generates:

<ul class="nav navbar-nav">
  Yay!
</ul>

You can add a align option to make the group float to the right or left, and add more classes and other attributes:

= navbar_group align: 'right', class: 'foo', id: 'bar'

generates:

<ul class="nav navbar-nav navbar-right foo" id="bar">
</ul>

navbar_item

This method generates a menu item, to be used in a navbar_group.

= navbar_item 'Home', '/home'

generates:

<li>
  <a href="/home">
    Home
  </a>
</li>

If the path (/home in this case) is not specified, it defaults to #.

You can also use a block (e.g., in case the link name is more than a single word):

= navbar_item '/home' do
  = image_tag 'home.png'
  Home

generates:

<li>
  <a href="/home">
    <img src="/images/home.png">
    Home
  </a>
</li>

You can add options that will be passed on to the li and a elements:

= navbar_item 'Home', '/home', { class: 'list-item' }, { id: 'home' }

generates:

<li class="list-item">
  <a href="/home" id="home">
    Home
  </a>
</li>

If the specified path/URL is the current url, it will be marked as active. Note that it doesn't matter if you link to a full URL or just the path, or if BootstrapNavbar.configuration.current_url_method returns a full URL or just the path, it will work regardless.

= navbar_item 'Home', '/home'

generates:

<!-- If the current path is /home -->

<li class="active">
  <a href="/home">
    Home
  </a>
</li>

navbar_form

This method generates a form, to be used in navbar_collapse.

= navbar_form

generates:

<form class="navbar-form" role="form">
</form>

You can align the form, set custom attributes such as classes and IDs, and set the role via the options:

= navbar_form align: 'right', class: 'foo', id: 'bar', role: 'search'

generates:

<form class="navbar-form navbar-right foo" role="search" id="bar">
</form>

navbar_button

This method generates a button, to be used in navbar_collapse.

= navbar_button 'Click here!'

generates:

<button class="btn navbar-btn" type="button">
  Click here!
</button>

You can set custom attributes such as classes and IDs and the type of the button via the options:

= navbar_button 'Click here!', class: 'foo', id: 'bar', type: 'submit'

generates:

<button class="btn navbar-btn foo" type="submit" id="bar">
  Click here!
</button>

navbar_dropdown

This method generates a dropdown, to be used in a navbar_group.

= navbar_dropdown 'Settings'

generates:

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    Settings
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
  </ul>
</li>

The content of the dropdown can be defined in the block using navbar_items:

= navbar_dropdown 'Settings' do
  = navbar_item 'Basic', '/settings/basic'
  = navbar_item 'Advanced', '/settings/advanced'

generates:

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    Settings
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <li>
      <a href="/settings/basic">
        Basic
      </a>
    </li>
    <li>
      <a href="/settings/advanced">
        Advanced
      </a>
    </li>
  </ul>
</li>

navbar_dropdown_header

This method generates a dropdown header, to be used in a navbar_dropdown.

= navbar_dropdown_header 'Important!'

generates:

<li class="dropdown-header">
  Important!
</li>

navbar_dropdown_divider

This method generates a dropdown divider, to be used in a navbar_dropdown.

= navbar_dropdown_divider

generates:

<li class="divider"></li>
Clone this wiki locally