active_element

0.0.13
Light Mode Dark Mode

Navbar

A default Navbar is provided automatically for any controllers that inherit from ActiveElement::ApplicationController and included in the default Layout.

The Navbar is generated from #index routes for all ActiveElement controllers.

For example, if you have a BookingsController and UsersController that both inherit from ActiveElement::Controller (either directly or via common parent controller that inherits from ActiveElement::ApplicationController) and provide an #index action, your Navbar will contain links for Users and Bookings.

The Navbar brand is calculated from the name of the application module as defined in config/application.rb.

If you wish to override the default Navbar configuration, create an initializer and set your desired options:

Configuration

# config/initializers/active_element.rb

ActiveElement.application_name = 'My Bookings System'
ActiveElement.navbar_items = [
  { label: 'Bookings', path: '/bookings' },
  { label: 'Users', path: '/users' },
  { label: 'New Booking', path: '/bookings/new' }
]

Note that overriding the default navbar_items means that all Navbar items must now be manually configured and ActiveElement will not infer any new items as new controllers/routes are added to your application.

Custom Usage

If you prefer to use a custom layout instead of the default provided by ActiveElement, the navbar component can be used like any other component. The default Navbar uses position: fixed to keep the Navbar visible when the user scrolls. This can be disabled by passing fixed: false.

subject do
  active_element.component.navbar(fixed: false)
end

it { is_expected.to include 'Users' }
<div class="application-menu  w-100 navbar navbar-dark bg-dark navbar-expand-lg">
  <div class="container">
    <a class="navbar-brand" href="#">Dummy</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 " href="/">Examples</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="/admin/permitted_alternatives">Permitted Alternatives</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="/components">Components</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="/example_permissions">Example Permissions</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="/examples">Examples</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="/pets">Pets</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="/users">Users</a>
        </li>
      </li>
    </ul>
  </div>
</div>
<div class="d-flex icon-menu p-3">
  <li class="nav-item dropdown" style="list-style: none">
    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
      <i class="fa-solid fa-user text-primary user-menu-icon"></i>
    </a>
    <ul class="dropdown-menu dropdown-menu-end">
    </ul>
  </li>
  <div class="ms-2" id="theme-select"></div>
</div>
</div>

The navbar component can also receive a custom set of options if you wish to have different menu items for certain pages.

subject do
  active_element.component.navbar(fixed: false, items: [{ label: 'Custom Link', path: '/custom' }])
end

it { is_expected.to include 'Custom Link' }
<div class="application-menu  w-100 navbar navbar-dark bg-dark navbar-expand-lg">
  <div class="container">
    <a class="navbar-brand" href="#">Dummy</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 " href="/custom">Custom Link</a>
        </li>
      </li>
    </ul>
  </div>
</div>
<div class="d-flex icon-menu p-3">
  <li class="nav-item dropdown" style="list-style: none">
    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
      <i class="fa-solid fa-user text-primary user-menu-icon"></i>
    </a>
    <ul class="dropdown-menu dropdown-menu-end">
    </ul>
  </li>
  <div class="ms-2" id="theme-select"></div>
</div>
</div>

Options

Keyword Description
fixed Enable or disable position: fixed on the Navbar element to allow it to stay visible when the user scrolls. Defaults to true.
items An array of { label: ..., path: ...} specifying all items that should appear in the Navbar.
Documentation generated by rspec-documentation