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

Navbar

Sticky top navigation with leading , app_links and actions slots.

With app links and actions

Leads Intake
CRM 3
EO
= app_theme_navbar(logo_url: "#") do |nav|
  - nav.with_app_link do
    = app_theme_navbar_app_link "Leads", href: "#", active: true
  - nav.with_app_link do
    = app_theme_navbar_app_link "Intake", href: "#"
  - nav.with_app_link do
    = app_theme_navbar_app_link(href: "#") do
      = app_theme_notification_badge "CRM", badge: 3
  - nav.with_actions do
    = app_theme_avatar(initials: "EO", size: :sm)

The bar at the top of this site is a live app_theme_navbar with a leading slot holding app_theme_sidebar_expand_btn .