7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

rails_bootstrap_navbarで楽にnavbarを書こう!

Last updated at Posted at 2015-01-16

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内でフォームを作るためのメソッドも準備されているようです(試していません)。
さらに知りたい方は本家をご参照ください。

おまけ

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

7
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?