Navigation

Populate the navigation using the :l_ui_navigation_items yield with l_ui_navigation_item for clickable items and l_ui_navigation_section for grouping.

The navigation is off-canvas by default and toggled via the header button on all screen sizes. Add l-ui-body--always-show-navigation to the body to pin it as a persistent sidebar on desktop.

Example

Use l_ui_navigation_item for links and l_ui_navigation_section to group them. A section that contains the active item opens automatically; storage_key: persists the user's open/closed preference. To expose the parent route of a section, add an "Overview" item.

The gem ships icon: "home" out of the box. For other names, supply the SVG in your host app at app/assets/images/layered_ui/icon_NAME.svg - icon: "products" resolves to icon_products.svg. For a path outside that convention use icon_path:. For icon-font libraries (Font Awesome, Heroicons, etc.) pass pre-rendered markup with icon_html:, e.g. icon_html: tag.i(class: "fa-solid fa-house").

<% content_for :l_ui_navigation_items do %>
  <%= l_ui_navigation_section do %>
    <%= l_ui_navigation_item "Home", root_path, icon: "home" %>
  <% end %>

  <%= l_ui_navigation_section "Layout", collapsible: true, storage_key: "layout" do %>
    <%= l_ui_navigation_item "Overview", layout_path %>
    <%= l_ui_navigation_item "Colors", layout_colors_path %>
    <%= l_ui_navigation_item "Panel", layout_panel_path %>
  <% end %>

  <%= l_ui_navigation_section "Account", separated: true do %>
    <%= l_ui_navigation_item "Settings", settings_path, match: :starts_with %>
  <% end %>
<% end %>

Always-show navigation

Pin the navigation open on desktop by passing the l-ui-body--always-show-navigation modifier via the :l_ui_body_class yield.

<% content_for :l_ui_body_class, "l-ui-body--always-show-navigation" %>

<%= render template: "layouts/layered_ui/application" %>

For inline header links on landing pages, see the header page.

Override

For full control, override the partial by creating app/views/layouts/layered_ui/_navigation.html.erb in your application.