SimpleNavigationRenderers
This gem adds several Simple Navigation renderers.
For now, it is include renderers for:
With these renderers you will be able create any bootstrap navigation elements, such as: submenu, navbar-text, divider, header. As well as add icons to menu elements, such as: gliphicons, font-awesome icons, even custom icons. Also you have split option for main menu containing submenu.
Installation
Add this line to your application's Gemfile:
gem 'simple_navigation_renderers'
and then execute:
$ bundle
Or install it yourself as:
$ gem install simple_navigation_renderers
Usage
Simply set up renderer and you are done!!
There are two ways to say that you want to use any of renderers.
-
You can specify it in you view as a parameter to
render_navigation
:... <%= render_navigation( expand_all: true, renderer: :bootstrap3 ) %> ...
-
Or you can set it in the very navigation configuration file (e.g.
config/navigation.rb
):SimpleNavigation::Configuration.run do |navigation| navigation.renderer = SimpleNavigationRenderers::Bootstrap2 # navigation itself goes here... end
Explicit example of using all features
I think you already using simple-navigation
gem and know how to define navigation items.
If not, you can always look at the configuration instructions on the Simple Navigation wiki or read comments and examples in the generated by default config/navigation.rb
file.
In addition to standard options you can use ones specific for Bootstrap renderers.
Lets look at the example:
SimpleNavigation::Configuration.run do |navigation|
navigation.renderer = SimpleNavigationRenderers::Bootstrap3
navigation.items do |primary|
primary.item :news, {icon: "fa fa-fw fa-bullhorn", text: "News"}, news_index_path
primary.item :concerts, "Concerts", concerts_path
primary.item :video, "Video", videos_path
primary.item :divider_before_info, '#', divider: true
primary.item :info, {icon: "fa fa-fw fa-book", title: "Info"}, info_index_path, split: true do |info_nav|
info_nav.item :main_info_page, "Main info page", info_path(:main_info_page)
info_nav.item :about_info_page, "About", info_path(:about_info_page)
info_nav.item :misc_info_pages, "Misc." do |misc_page|
misc_page.item :header_misc_pages, "Misc. Pages", header: true
Info.all.each do |info_page|
misc_page.item :"#{info_page.permalink}", info_page.title, info_path(info_page)
end
end
info_nav.item :divider_before_contact_info_page, '#', divider: true
info_nav.item :contact_info_page, "Contact", info_path(:contact_info_page)
end
primary.item :singed_in, "Signed in as Pavel Shpak", navbar_text: true
end
end
Features
Specific options used in the example:
:split
- Use it to split first level item link with caret. If you addsplit: true
option to item, then caret itself will toggle first level submenu and link will have standard behaviour, instead of toggle submenu. You can use:split
only with first level items, for the rest it will not do anything.:navbar_text
- Use it asnavbar_text: true
to add Bootstrap 'navbar-text'.:divider
- Use it to add Bootstrap menu divider. if you adddivider: true
option to first level item, then it will create li-tag withdivider-vertical
Bootstrap 2 class. (You can adddivider-vertical
class to Bootstrap 3 - see below). For the second level item and deeper it will create li-tag with classdivider
(which exists in both, Bootstrap 2 and 3).:header
- Use it asheader: true
to add Bootstrap menu header. You can use:header
only with submenus, for the first level items it will not do anything.:name hash
- Use it in place of:name
if you want. Hash can have three keys::text
,:icon
and:title
, which is only recognized. You can use it together or separatly, but at least one of:text
and:icon
parameters should be provided. For example:{text: "News", icon: "fa fa-fw fa-bullhorn"}
will create Font Awesome icon and add text after it (name of the item){icon: "glyphicon glyphicon-book", title: "Info"}
will create Bootstrap icon with title without any text after it
Notes
-
Bootstrap 3 has only one level submenu. If you want to use nested submenus as in example above, import
bootstrap2_dropdown_submenu.css.scss
file into your Sass file (e.g.application.css.scss
) as following:@import "bootstrap2_dropdown_submenu";
-
Bootstrap 3 has not
divider-vertical
class. If you want to use it as in example above, importbootstrap2_navbar_divider_vertical.css.scss
file:@import "bootstrap2_navbar_divider_vertical";
-
You may also want to include following file which changes some first level submenu style:
@import "simple_navigation_bootstrap_overrides";
or you can add them all together:
@import "simple_navigation_bootstrap";
Result of the example
Thus, above example will produce something like following code:
<ul class="nav navbar-nav">
<li id="news" class="active simple-navigation-active-leaf">
<a href="/news_index_path"><span class="fa fa-fw fa-bullhorn"></span> News</a>
</li>
<li id="concerts"><a href="/concerts_path">Concerts</a></li>
<li id="video"><a href="/videos_path">Video</a></li>
<li id="divider_before_info" class="divider-vertical"></li>
<li id="info" class="dropdown-split-left">
<a href="/info_index_path"><span class="fa fa-fw fa-book" title="Info"></span></a>
</li>
<li class="dropdown dropdown-split-right">
<a class="dropdown-toggle" data-target="#" data-toggle="dropdown" href="#"><b class="caret"></b></a>
<ul class="pull-right dropdown-menu">
<li id="main_info_page"><a href="/info/main_info_page">Main info page</a></li>
<li id="about_info_page"><a href="/info/about_info_page">About</a></li>
<li id="misc_info_pages" class="dropdown-submenu">
<a href="#">Misc.</a>
<ul class="dropdown-menu">
<li id="header_misc_pages" class="dropdown-header">Misc. Pages</li>
<li id="page1"><a href="/info/page1">Page1</a></li>
<li id="page2"><a href="/info/page2">Page2</a></li>
</ul>
</li>
<li id="divider_before_contact_info_page" class="divider"></li>
<li id="contact_info_page"><a href="/info/contact_info_page">Contact</a></li>
</ul>
</li>
<li id="singed_in"><p class="navbar-text">Signed in as Pavel Shpak</p></li>
</ul>
Test
Just run following commands:
$ bundle
$ rake
Contributing
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request
MIT License
See the file LICENSE.txt for copying permission.