Navbar

Description

Create a responsive and customizable navigation bar for easy website navigation across different devices and screen sizes.

FREE

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

Arguments

Name	Default	Type	Description
`expand`		`String`	Specify the responsive expansion behaviour of the navbar Options: `sm`, `md`, `lg`, `xl`, `xxl`
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

Examples

Default

<%= render Railsboot::NavbarComponent.new(expand: "md", class: "bg-body-tertiary") do %>
  <div class="container-fluid">
    <%= render Railsboot::Navbar::BrandComponent.new.with_content("Navbar") %>
    <%= render Railsboot::Navbar::TogglerComponent.new(id: "navbarSupportedContent") %>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <%= render Railsboot::Navbar::NavComponent.new(tag: "ul", class: "me-auto mb-2 mb-lg-0") do |nav| %>
        <% nav.with_item(wrapper_item: true, text: "Home", href: "#", active: true) %>
        <% nav.with_item(wrapper_item: true, text: "Link", href: "#") %>
        <% nav.with_item(wrapper_item: true, wrapper_html_attributes: {class: "dropdown"}) do %>
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        <% end %>
        <% nav.with_item(wrapper_item: true, text: "Disabled", href: "#", disabled: true) %>
      <% end %>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" autocomplete="off" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
<% end %>

<nav class="navbar navbar-expand-md bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true" href="#">Disabled</a>
        </li>
      </ul>
      
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" autocomplete="off" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Slots

The NavbarComponent itself does not define any slots. THis is because the Bootstrap nabbar is build to individually adjust some components that make your desired navbar, which cannot easily be accomblished with slots, where especially the ordering usually is important.

But we provide additonal Components, that can be used to build the typical Bootstrap based navigations.

Brand Component

Railsboot::Navbar::BrandComponent

Specify the brand within your navbar. See the Bootstrap Doc for various examples.

Arguments

Name	Default	Type	Description
`tag`	`a`	`String`	HTML tag of the brand component
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

Nav Component

Railsboot::Navbar::NavComponent

Specify the nav within your navbar. See the Bootstrap Doc for various examples.

Arguments

Name	Default	Type	Description
`tag`	`a`	`String`	HTML tag of the nav component
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

Toggler Component

Railsboot::Navbar::TogglerComponent

Specify the toggler within your navbar. See the Bootstrap Doc for various examples.

Arguments

Name	Default	Type	Description
`id`		`String`	ID html attribute tag of the toggler component
`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/navbar_component.rb).
A view template (app/components/railsboot/navbar_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/navbar_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.

Nav Offcanvas