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
Forms
Form Select Toggle Checkbox & Radio Text Fields Date & Time Fields
Layout
Navbar Sidebar Table Pagination Breadcrumbs Selector List
Utilities
Local Time

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