simple_navigation_renderers

KO | EN

gitlite — search

#python #ai #llm #golang #go #android #rust #deep-learning #docker #macos #windows #awesome #cli #ios

simple_navigation_renderers

(★ 9)

simple_navigation_renderers gem adds renderers for Bootstrap 2 and 3. 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.

simple_navigation_renderers Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# SimpleNavigationRenderers

[![Gem Version](https://badge.fury.io/rb/simple_navigation_renderers.png)](http://badge.fury.io/rb/simple_navigation_renderers)
[![Build Status](https://travis-ci.org/ShPakvel/simple_navigation_renderers.png?branch=master)](https://travis-ci.org/ShPakvel/simple_navigation_renderers)
[![Code Climate](https://codeclimate.com/github/ShPakvel/simple_navigation_renderers.png)](https://codeclimate.com/github/ShPakvel/simple_navigation_renderers)
[![Coverage Status](https://coveralls.io/repos/ShPakvel/simple_navigation_renderers/badge.png)](https://coveralls.io/r/ShPakvel/simple_navigation_renderers)
[![Dependency Status](https://gemnasium.com/ShPakvel/simple_navigation_renderers.png)](https://gemnasium.com/ShPakvel/simple_navigation_renderers)

This gem adds several [Simple Navigation](https://github.com/andi/simple-navigation) renderers.  
For now, it is include renderers for:
* [Bootstrap 2 navigation](http://getbootstrap.com/2.3.2/components.html#navbar)
* [Bootstrap 3 navigation](http://getbootstrap.com/components/#navbar)

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:

```ruby
gem 'simple_navigation_renderers'
```

and then execute:

```console
$ bundle
```

Or install it yourself as:

```console
$ 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.

1. You can specify it in you view as a parameter to `render_navigation`:

```erb
 ...
 <%= render_navigation( expand_all: true, renderer: :bootstrap3 ) %>
 ...
 ```

2. Or you can set it in the very navigation configuration file (e.g. `config/navigation.rb`):

```ruby
    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](https://github.com/andi/simple-navigation/wiki/Configuration) 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:

```ruby
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 add `split: 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 as `navbar_text: true` to add Bootstrap 'navbar-text'.
* `:divider` - Use it to add Bootstrap menu divider. if you add `divider: true` option to first level item, then it will create li-tag with `divider-vertical` Bootstrap 2 class. (You can add `divider-vertical` class to Bootstrap 3 - see below). For the second level item and deeper it will create li-tag with class `divider` (which exists in both, Bootstrap 2 and 3).
* `:header` - Use it as `header: 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

1. 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:

```scss
    @import "bootstrap2_dropdown_submenu";
    ```

2. Bootstrap 3 has not `divider-vertical` class. If you want to use it as in example above, import `bootstrap2_navbar_divider_vertical.css.scss` file:

```scss
    @import "bootstrap2_navbar_divider_vertical";
    ```

3. You may also want to include following file which changes some first level submenu style:

```scss
    @import "simple_navigation_bootstrap_overrides";
    ```

or you can add them all together:

```scss
@import "simple_navigation_bootstrap";
```

#### Result of the example

Thus, above example will produce something like following code:

```html
<ul class="nav navbar-nav">
 <li id="news" class="active simple-navigation-active-leaf">
 <a href="/news_index_path"> 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"></a>
 </li>
 <li class="dropdown dropdown-split-right">
 <a class="dropdown-toggle" data-target="#" data-toggle="dropdown" href="#"></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">Signed in as Pavel Shpak</li>
</ul>
```

## Test

Just run following commands:

```console
$ bundle
$ rake
```

## Contributing

1. Fork it
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create new Pull Request

## MIT License

See the file LICENSE.txt for copying permission.

simple_navigation_renderers

simple_navigation_renderers Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

simple_navigation_renderers

simple_navigation_renderers Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README