Getting Started
Components

Nav

Description

Create responsive nav components with various styles - links, tabs, pills, underline.

FREE
This component is available for free. It implements the Bootstrap Nav component. See the installation instructions below for more details.

Arguments

Name Default Type Description
size String Specify the modal size
Options: xl, lg, sm
fade true Boolean Use fade animation in open
html_attributes {} Hash Any attributes for the used html wrapper tag

Examples

Default 

<%= render Railsboot::NavComponent.new do |nav| %>
  <% nav.with_item(text: "Link 1", href: "#", active: true) %>
  <% nav.with_item(text: "Link 2", href: "#") %>
  <% nav.with_item(text: "Link 3", href: "#") %>
  <% nav.with_item(text: "Link 4", href: "#", disabled: true) %>
<% end %>

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Link 1</a>
  <a class="nav-link" href="#">Link 2</a>
  <a class="nav-link" href="#">Link 3</a>
  <a class="nav-link disabled" aria-disabled="true" href="#">Link 4</a>
</nav>

Styles 

<%= render Railsboot::NavComponent.new(style: "pills") do |nav| %>
  <% nav.with_item(text: "Link 1", href: "#", active: true) %>
  <% nav.with_item(text: "Link 2", href: "#") %>
  <% nav.with_item(text: "Link 3", href: "#") %>
  <% nav.with_item(text: "Link 4", href: "#", disabled: true) %>
<% end %>

<%= render Railsboot::NavComponent.new(style: "tabs", class: "mt-4") do |nav| %>
  <% nav.with_item(text: "Link 1", href: "#", active: true) %>
  <% nav.with_item(text: "Link 2", href: "#") %>
  <% nav.with_item(text: "Link 3", href: "#") %>
  <% nav.with_item(text: "Link 4", href: "#", disabled: true) %>
<% end %>

<%= render Railsboot::NavComponent.new(style: "underline", class: "mt-4") do |nav| %>
  <% nav.with_item(text: "Link 1", href: "#", active: true) %>
  <% nav.with_item(text: "Link 2", href: "#") %>
  <% nav.with_item(text: "Link 3", href: "#") %>
  <% nav.with_item(text: "Link 4", href: "#", disabled: true) %>
<% end %>

<nav class="nav nav-pills">
  <a class="nav-link active" aria-current="page" href="#">Link 1</a>
  <a class="nav-link" href="#">Link 2</a>
  <a class="nav-link" href="#">Link 3</a>
  <a class="nav-link disabled" aria-disabled="true" href="#">Link 4</a>
</nav>
<nav class="nav nav-tabs mt-4">
  <a class="nav-link active" aria-current="page" href="#">Link 1</a>
  <a class="nav-link" href="#">Link 2</a>
  <a class="nav-link" href="#">Link 3</a>
  <a class="nav-link disabled" aria-disabled="true" href="#">Link 4</a>
</nav>
<nav class="nav nav-underline mt-4">
  <a class="nav-link active" aria-current="page" href="#">Link 1</a>
  <a class="nav-link" href="#">Link 2</a>
  <a class="nav-link" href="#">Link 3</a>
  <a class="nav-link disabled" aria-disabled="true" href="#">Link 4</a>
</nav>

Widths 

<%= render Railsboot::NavComponent.new(style: "pills", width: "fill") do |nav| %>
  <% nav.with_item(text: "Link 1", href: "#", active: true) %>
  <% nav.with_item(text: "Much longer nav link", href: "#") %>
  <% nav.with_item(text: "Link 3", href: "#") %>
  <% nav.with_item(text: "Link 4", href: "#", disabled: true) %>
<% end %>

<%= render Railsboot::NavComponent.new(style: "pills", width: "justified", class: "mt-4") do |nav| %>
  <% nav.with_item(text: "Link 1", href: "#", active: true) %>
  <% nav.with_item(text: "Much longer nav link", href: "#") %>
  <% nav.with_item(text: "Link 3", href: "#") %>
  <% nav.with_item(text: "Link 4", href: "#", disabled: true) %>
<% end %>

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Link 1</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link 3</a>
  <a class="nav-link disabled" aria-disabled="true" href="#">Link 4</a>
</nav>
<nav class="nav nav-pills nav-justified mt-4">
  <a class="nav-link active" aria-current="page" href="#">Link 1</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link 3</a>
  <a class="nav-link disabled" aria-disabled="true" href="#">Link 4</a>
</nav>

With wrapper item 

<%= render Railsboot::NavComponent.new(tag: "ul") do |nav| %>
  <% nav.with_item(wrapper_item: true, text: "Link 1", href: "#", active: true) %>
  <% nav.with_item(wrapper_item: true, text: "Much longer nav link", href: "#") %>
  <% nav.with_item(wrapper_item: true, text: "Link 3", href: "#") %>
  <% nav.with_item(wrapper_item: true, wrapper_html_attributes: {class: "custom-class"}, text: "Link 4", href: "#", disabled: true) %>
<% end %>

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Link 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link 3</a>
  </li>
  <li class="nav-item custom-class">
    <a class="nav-link disabled" aria-disabled="true" href="#">Link 4</a>
  </li>
</ul>

Slots

items Railsboot::Modal::ItemsComponent Allows many

The items (links) within the nav component

Name Default Type Description
text String Text of the item
href String href attribute of the item
active Boolean Defines active state of the item
disabled Boolean Defines disabled state of the item
wrapper_item Boolean Defines if the nav needs a wrapper tag
wrapper_tag li String Defines the wrapper for each item
wrapper_html_attributes {} Hash Defines additional html_attributes for the wrapper item
html_attributes {} Hash Any attributes for the used html wrapper tag

Installation

Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:

  • A parent component class (app/components/railsboot/component.rb) of which all components inherit from.
  • A base component class (app/components/railsboot/base_component.rb) which is used for rendering internally.
  • The desired component itself (app/components/railsboot/nav_component.rb).
  • A view template (app/components/railsboot/nav_component.html.erb) for the component unless it's rendered inline.
  • Any other dependent components such as Slots (just if the component needs those)
  • Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
  • A test file for the components (test/components/railsboot/nav_component_test.rb) including potential slot or dependency tests.

For more information please refer to the installation section.

Download

Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.

Modal Navbar