navbar書くのは面倒臭い！

bootstrap3を使ってサイトを作るときって、navbarを使うこと多いと思うのですが、これが結構複雑で書きにくいなーって感じた事はありませんか？実はnavbarを書くためだけのgemがあるのです！それが、bootstrap_nabvarです。今回はrailsで使う用のrails_bootstrap_navbarを紹介します。

導入方法

まずはGemfileに追加します。

Gemfile

gem 'rails_bootstrap_navbar'

そしてインストール。

railsプロジェクト内にて

bundle install

これで利用準備はできました。

使い方

使い方については、Usage with Bootstrap 3.xを見てください。
というと元も子もないので、ちょっと説明します。

bootstrap_navbarは、navbarのhtmlを記述するためのDSLなので、ネストして書いていくことになります。
ただし、複雑なnavbarをbootstrap_navbarだけで作るのは難しいです。
あくまでシンプルなものだけになります。なので、いざというときは普通にhtmlを記述する必要はあります。

app/views/layouts/_navigation.html.slim

= navbar fixed: :top do
  = navbar_header brand: 'My Great App', brand_link: root_path
  = navbar_collapse do
    = navbar_group align: 'left' do
      = navbar_item 'メニュー1', '#'
      = navbar_item 'メニュー2', '#'
      = navbar_item 'メニュー3', '#'
      li = navbar_text 'ただのテキスト'
      li
        p.navbar-btn = link_to 'ボタン風リンク', '#', class: 'btn btn-default'
    = navbar_group align: 'right' do
      = navbar_dropdown '管理者' do
        = navbar_item 'マイページ', '#'
        = navbar_dropdown_devider
        = navbar_item 'ログアウト', '#', nil, {:'data-method' => 'delete'}

navbar

navbar用のクラス付きのnavタグを生成します。オプションでバーを固定したり、レスポンシブ対応にできたりします。

navbar_header

モバイルのときに表示されるトグルメニューをこれだけで作成することができます。
オプションでnavbar上のサイト名(ブランド名？)を記述することもできます。
brandがある場合、brand_urlを省略すると、デフォルトで '/' にリンクが貼られます。
ただし、画像ロゴを出すときは自動で中央揃えにするのは難しそうなので、素直にhtmlを書くか、navbarに最適化されたロゴを準備したほうがよさそうです。

navbar_collapse

ロゴ以降の入れ物を準備します。

navbar_group

メニュー用のulタグを生成します。

navbar_item

メニュー用のliタグ付きのリンクを生成します。link_toを使ってリンクを生成するわけではないので、オプションには注意が必要です。

= navbar_item 'ログアウト', '#', nil, {:'data-method' => 'delete'}

ログアウトの記述のところで、{:'data-method' => 'delete'}と書いているのはそのためです。

navbar_text

navbar上でpタグを使ってちょうどいい位置にテキストを書いてくれます。
ただし、pタグしか生成しないため、navbar_group内で使うと、ulタグの子要素としてpタグができてしまうので注意が必要です。

slim

= navbar_collapse do
  = navbar_group align: 'left' do
    = navbar_item 'メニュー1', '#'
    li = navbar_text 'ただのテキスト'

こうすると、html的に綺麗かなと思います。

navbar上でリンクのボタンを綺麗に表示する

buttonタグでボタンを綺麗に表示するのは簡単なのですが(navbar_buttonメソッドを使う)、aタグのボタンを作るのが難しかったのでTipsとして載せておきます。

slim

= navbar_collapse do
  = navbar_group align: 'left' do
    li
      p.navbar-btn = link_to 'ボタン風リンク', '#', class: 'btn btn-default'

コツは、p.navbar-btnでリンクを囲んでしまうことです。

まだまだあります。

他にも、navbar内でフォームを作るためのメソッドも準備されているようです（試していません）。
さらに知りたい方は本家をご参照ください。

Usage with Bootstrap 3.x

おまけ

ちなみに、middleman_bootstrap_navbarもあります！