Skip to content

Usage with Bootstrap 2

Jump to bottom
Manuel Meurer edited this page Aug 10, 2016 · 1 revision

Full example

Full example

= navbar brand: 'My great app', brand_link: '/home', fixed: :top, responsive: true do
  = navbar_group class: 'foo', id: 'menu' do
    = navbar_text 'Pick an option:', 'left'
    = navbar_item "Home", '/'
    = navbar_item "About Us", '/about-us'
    = navbar_item '/contact' do
      %i.icon-hand-right
      Contact Us!
    = navbar_divider
    = 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_sub_dropdown 'Admin Stuff' do
          = navbar_item "Admin Dashboard", '/admin'
          = navbar_item "Users", '/admin/users'
  = navbar_group pull: '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:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
      </a>
      <a href="/home" class="brand">My great app</a>
      <div class="nav-collapse collapse">
        <ul class="nav foo" id="menu">
          <p class="navbar-text pull-left">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">
              <i class='icon-hand-right'></i>
              Contact Us!
            </a>
          </li>
          <li class="divider-vertical"></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Stuff
              <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li class="nav-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 class="dropdown-submenu">
                <a href="#">Admin Stuff</a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="/admin">Admin Dashboard</a>
                  </li>
                  <li>
                    <a href="/admin/users">Users</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
        <ul class="nav pull-right">
          <li>
            <a href="/logout">Log Out</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Methods

navbar

This method sets up the basic structure of a navbar.

= navbar

generates:

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
    </div>
  </div>
</div>

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

= navbar do
  Yay!

generates:

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      Yay!
    </div>
  </div>
</div>

Options brand and brand_link autogenerate the brand link:

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

generates:

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <a href="/start" class="brand">My great app</a>
    </div>
  </div>
</div>

If only brand is defined, brand_link defaults to /.

Option responsive generates a responsive navbar:

= navbar responsive: true

generates:

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
      </a>
      <div class="nav-collapse collapse">
      </div>
    </div>
  </div>
</div>

Attention: when using the responsive option, the brand link should not be added through the brand_link method but directly supplied to the navbar call.

Don't do this:

= navbar responsive: true do
  = brand_link 'My great app', '/home'

Do this:

= navbar responsive: true, brand: 'My great app', brand_link: '/home'

Otherwise the brand link will be nested incorrectly and will disappear when resizing the window to a smaller size.

Option fluid changes the grid system to be fluid:

= navbar fluid: true

generates:

<div class="navbar">
  <div class="navbar-inner">
    <div class="container-fluid">
    </div>
  </div>
</div>

navbar_brand_link

This method generates a menu divider, to be used in a navbar.

= navbar_brand_link 'My App', '/home'

generates:

<a href="/home" class="brand">My App</a>

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

navbar_text

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

= navbar_text 'Select a option:'

generates:

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

A option can be supplied to make the text float to the right or left:

= navbar_text 'Select a option:', :right

generates:

<p class="navbar-text pull-right">
  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>

navbar_group

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

= navbar_group

generates:

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

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

= navbar_group do
  Yay!

generates:

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

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

= navbar_group pull: 'right', class: 'large', id: 'menu'

generates:

<ul class="nav pull-right large" id="menu">
</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_divider

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

= navbar_divider

generates:

<li class="divider-vertical"></li>

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_sub_dropdown

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

= navbar_sub_dropdown 'Admin Settings'

generates:

<li class="dropdown-submenu">
  <a href="#">
    Admin Settings
  </a>
  <ul class="dropdown-menu">
  </ul>
</li>

Just like in the navbar_dropdown, the content of the sub dropdown is defined in the block:

= navbar_sub_dropdown 'Admin Settings' do
  = navbar_item 'Users', '/settings/admin/users'
  = navbar_item 'Stats', '/settings/admin/stats'

generates:

<li class="dropdown-submenu">
  <a href="#">
    Admin Settings
  </a>
  <ul class="dropdown-menu">
    <li>
      <a href="/settings/admin/users">
        Users
      </a>
    </li>
    <li>
      <a href="/settings/admin/stats">
        Stats
      </a>
    </li>
  </ul>
</li>

navbar_dropdown_divider

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

= navbar_dropdown_divider

generates:

<li class="divider"></li>

navbar_dropdown_header

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

= navbar_dropdown_header 'Important!'

generates:

<li class="nav-header">Important!</li>
Clone this wiki locally