Skip to content
This repository has been archived by the owner on Nov 23, 2018. It is now read-only.

Navigation

TrueNorth edited this page Jun 15, 2012 · 3 revisions

Spurs makes creation of bootstrap navigation easy!.

spurs_nav :type => :pills do |nav|
  # a simple nav item as a regular link
  nav.tab :user, :icon => :user, :href => "#user"    
  # a nav item that runs some javascript
  nav.tab :settings, :icon => :cog, :onclick => "alert('hello');"
  # a nav item that only shows its icon (not its name)
  nav.tab :secure, :icon => :lock, :icon_only => true
  # a dropdown menu with two actions
  nav.dropdown :menu, 
               :icon => :cog, 
               :icon_only => true,
               :actions => [ {:name => "one", :icon => :plus, :href => "#one"},
                             {:name => "two", :icon => :minus, :href => "#two"}]

will generate a menu like this...

image

or in HTML...

<ul class="nav nav-pills  ">
  <li>
    <a href="#user">
      <i class="icon-user"></i>User
    </a>
  </li>
  <li>
    <a onclick="alert('hello');">
      <i class="icon-cog"></i>Settings
    </a>
  </li>
  <li>
    <a>
      <i class="icon-lock"></i>Secure
    </a>
  </li>
  <li class="dropdown" data-dropdown="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown">
      <i class="icon-cog"></i>
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li>
        <a href="#one">
          <i class="icon-plus"></i>No Name
        </a>
      </li>
      <li>
        <a href="#two">
          <i class="icon-minus"></i>No Name
        </a>
      </li>
    </ul>
  </li>
</ul>

You can specify some active criteria for menu items

spurs_nav :type => :pills do |nav|
  # force this to be active with a boolean
  nav.tab :user, :icon => :user, :href => "#user", 
          :active => true
  # controller criteria (if controller_name == :settings)
  nav.tab :settings, :icon => :cog, :onclick => "alert('hello');", 
          :active => {:controller => :settings}
  # controller and action criteria (if controller_name == :settings && action_name == ;edit)
  nav.tab :settings, :icon => :cog, :onclick => "alert('hello');", 
          :active => {:controller => :settings, :action => :edit}
  # multiple controller/action criteria 
  # if (controller_name == :settings && action_name == :edit) || 
  #    (controller_name == :user && action_name == :edit)
  nav.tab :settings, :icon => :cog, :onclick => "alert('hello');", 
          :active => [{:controller => :settings, :action => :edit},
                      {:controller => :users, :action => :edit}]
Clone this wiki locally