Sidebar

A flexible sidebar navigation component with mobile overlay behavior. Use it to build application navigation with sections, user controls, and smooth animations that automatically adapts between desktop and mobile patterns.

Basic Example

<!DOCTYPE html>

<html data-controller="nk--sidebar">
  <head>
    <!-- ... -->
  </head>

  <body>
    <%= nk_sidebar_layout(breakpoint: :md) do |layout| %>
      <%= layout.sidebar do %>
        <%= layout.sidebar_section do %>
          <%= layout.sidebar_item_to "Home", "#", active: true %>
          <%= layout.sidebar_item_to "Projects", "#" %>
          <%= layout.sidebar_item_to "Settings", "#" %>
        <% end %>

        <%= layout.sidebar_space %>

        <%= layout.sidebar_section do %>
          <%= layout.sidebar_item_to "Sign out", "#" %>
        <% end %>
      <% end %>

      <%= layout.main do %>
        <%= layout.title_bar %>

        <section>
          <h1>Welcome to your Dashboard</h1>
        </section>
      <% end %>
    <% end %>
  </body>
</html>

Usage


`nk_sidebar_layout(title: nil, **attrs) { \|sidebar\| ... }`
Property	Default	Description
`title`	`String`	Optional default title for the title bar. Can be overridden with content_for(:title).
`**attrs`		HTML attributes for `<div>` element

Layout Methods


`sidebar.sidebar { \|s\| ... }`
Property	Default	Description
`block`	`Proc`	Content for the sidebar navigation area. Use sidebar builder methods within this block.


`sidebar.main { \|m\| ... }`
Property	Default	Description
`block`	`Proc`	Content for the main content area. Automatically handles responsive padding for sidebar.


`sidebar.title_bar(**attrs) { ... }`
Property	Default	Description
`block`	`Proc`	Optional content for the title bar. Includes hamburger menu for mobile.
`**attrs`		HTML attributes for `<nav>` element

Sidebar Builder Methods


`sidebar.sidebar_item_to(args, active: false, *attrs) { ... }`
Property	Default	Description
`args`	`link_to arguments`	Standard Rails link_to arguments (text, path, options).
`active`	`Boolean`	Whether this item represents the current active page.
`**attrs`		HTML attributes for `<button>` element


`sidebar.sidebar_section { ... }`
Property	Default	Description
`block`	`Proc`	Groups navigation items with consistent spacing.


`sidebar.sidebar_space`
Property	Default	Description
		Flexible spacer to push subsequent items to bottom of sidebar.

Content Areas

The sidebar layout supports several content areas that can be customized:

title_bar_left_action: Content before the title (use content_for)
title_bar_right_action: Content after the title (use content_for)
title: Override the default title text (use content_for)

<% content_for :title_bar_left_action do %>
  <%= nk_button "Back", variant: :ghost, size: :sm %>
<% end %>

<% content_for :title, "Custom Page Title" %>

<% content_for :title_bar_right_action do %>
  <%= nk_button "Save", size: :sm %>
<% end %>

Responsive Design

The sidebar component automatically handles responsive behavior:

Desktop (lg+): Sidebar permanently visible, content has left padding
Mobile: Sidebar hidden by default, slides in as overlay when opened
Backdrop: Semi-transparent backdrop on mobile prevents interaction with main content
Click Outside: Automatically closes sidebar when clicking outside on mobile
Keyboard Navigation: Proper ARIA labels and keyboard accessibility

CSS Custom Properties

The sidebar uses CSS custom properties for consistent spacing:

--sidebar-width: Width of the sidebar (default: 18rem/288px)
--layout-padding: Internal content padding (responsive: 1.25rem/2rem)

Override these in your CSS for custom sizing:

:root { --sidebar-width: 20rem; --layout-padding: 3rem; }