Pages
Introduction Colors & Tokens Icons
UI
Button Link Badge Notification Badge Alert Card Spinner Avatar Divider Empty State
Interactive
Modal Side Modal Dropdown Tooltip Accordion Tabs Flash Toast Support Button
Forms
Form Select Toggle Checkbox & Radio Text Fields Date & Time Fields
Layout
Navbar Sidebar Table Pagination Breadcrumbs Selector List
Utilities
Local Time
app_theme v1.39.1

Sidebar

Fixed, collapsible navigation with hover-to-peek. The sidebar you're using on this very site is a live example.

Because the sidebar is position-fixed it can't be embedded in a preview box — the snippets below show how this site composes it.

Sidebar layout

= app_theme_sidebar_layout(collapsed: false) do |layout|
  - layout.with_sidebar do
    = app_theme_sidebar(logo_url: root_path) do |sidebar|
      - sidebar.with_section(title: "Apps") do |section|
        - section.with_link(href: "/leads", icon: :users, active: true) do
          Leads
        - section.with_link(href: "/intake", icon: :phone) do
          Intake
      - sidebar.with_footer do
        = app_theme_avatar(initials: "EO", size: :sm)
  - layout.with_body do
    = app_theme_navbar do |nav|
      - nav.with_leading do
        = app_theme_sidebar_expand_btn
    %main= yield