Skip to content
Aggarly OS
  • Getting Started
    • Introduction
  • Foundations
    • Colors
    • Spacing
    • Radius
    • Typography
    • Shadows
    • Z-Index
    • Gradients
    • Tokens
    • RTL & Direction
    • Theming
  • Layout
    • Containers
    • Grid System
    • Layout Utilities
  • Components
    • Alerts
    • Avatars
    • Buttons
    • Button Group
    • Badges
    • Inputs
    • Select
    • Checkbox
    • Counters-timers
    • Radio
    • Switch
    • Stepper
    • Select-pro
    • Cards
    • Modals
    • Dropdown
    • Popover
    • Tooltip
    • Accordion
    • Breadcrumb
    • Tabs
    • Navbar
    • List Group
    • Toasts
    • Skeleton
    • Pagination
    • Progress
    • Table
    • Icons
    • Form
    • Ribbons
    • Spinner
    • Offcanvas
    • Feedback
    • Grid
    • Data UI
  • Data UI
    • Overview
  • Platform
    • Reference DataCore
  • Widgets
    • KPI
    • Analytics
    • Behavior
  • Brand
    • Logo
    • Brand Usage
Components/Navbar

Navbars

Navbars provide structured, enterprise-grade navigation for Aggarly Platform across clinical, admin, and workspace member-portal experiences. This system supports premium surfaces, icons/images, search patterns, centered layouts, and mobile collapse (dropdown + drawer).

Assets used in these previews come from your /public folder: /assets/icons/thera-icon.svg, /assets/icons/thera-avatar-icon.svg, and root icons (/window.svg, /file.svg, /globe.svg).

App Navbar (Logo + Text)

Primary app bar: logo, product title, primary links, and right-side actions.

AggarlyAggarly PlatformClinical workspace
  • Dashboard
  • Students
  • Billing
  • Reports3
Show code
App navbar (JSX)
import { Navbar, NavbarSection, NavbarBrand, NavbarNav, NavbarItem, NavbarLink, NavbarActions } from "@/design-system/components/Navbar";
import { Button } from "@/design-system/components/Button";

export function Example() {
  return (
    <Navbar tone="primary" variant="surface" size="md" sticky bordered elevated>
      <NavbarSection align="start">
        <NavbarBrand
          href="/"
          logo={<img className="navbar__logo-img" src="/assets/icons/thera-icon.svg" alt="Aggarly" />}
          title="Aggarly Platform"
          subtitle="Clinical workspace"
        />

        <NavbarNav ariaLabel="Primary">
          <NavbarItem><NavbarLink href="/dashboard" active>Dashboard</NavbarLink></NavbarItem>
          <NavbarItem><NavbarLink href="/students">Students</NavbarLink></NavbarItem>
          <NavbarItem><NavbarLink href="/billing">Billing</NavbarLink></NavbarItem>
          <NavbarItem><NavbarLink href="/reports" badge={3}>Reports</NavbarLink></NavbarItem>
        </NavbarNav>
      </NavbarSection>

      <NavbarSection align="end">
        <NavbarActions>
          <Button variant="ghost" size="sm">Help</Button>
          <Button variant="primary" size="sm">New</Button>
        </NavbarActions>
      </NavbarSection>
    </Navbar>
  );
}

Contrast Navbar (Admin)

High-contrast top bar for admin/security workflows; maintains enterprise readability.

AggarlyAggarly PlatformAdmin console
  • Admin
  • Audits
  • Security2
Show code
Contrast navbar (JSX)
import { Navbar, NavbarSection, NavbarBrand, NavbarNav, NavbarItem, NavbarLink, NavbarActions } from "@/design-system/components/Navbar";
import { Button } from "@/design-system/components/Button";

export function Example() {
  return (
    <Navbar tone="primary" variant="contrast" bordered elevated>
      <NavbarSection align="start">
        <NavbarBrand
          href="/"
          logo={<img className="navbar__logo-img" src="/assets/icons/thera-icon.svg" alt="Aggarly" />}
          title="Aggarly Platform"
          subtitle="Admin console"
        />

        <NavbarNav ariaLabel="Primary">
          <NavbarItem><NavbarLink href="/admin" active>Admin</NavbarLink></NavbarItem>
          <NavbarItem><NavbarLink href="/audits">Audits</NavbarLink></NavbarItem>
          <NavbarItem><NavbarLink href="/security" badge={2}>Security</NavbarLink></NavbarItem>
        </NavbarNav>
      </NavbarSection>

      <NavbarSection align="end">
        <NavbarActions>
          <Button variant="ghost" size="sm">Docs</Button>
          <Button variant="primary" size="sm">Create</Button>
        </NavbarActions>
      </NavbarSection>
    </Navbar>
  );
}

Nav Items With Icons + Descriptions

Icon+text navigation for enterprise scanning; supports optional descriptions.

AggarlyAggarly Platform
  • Workspace
  • Files
  • PortalWorkspace member & student portal
Show code
Navbar with icons (JSX)
import { Navbar, NavbarSection, NavbarBrand, NavbarNav, NavbarItem, NavbarLink, NavbarActions } from "@/design-system/components/Navbar";
import { Button } from "@/design-system/components/Button";

export function Example() {
  return (
    <Navbar tone="neutral" variant="surface">
      <NavbarSection align="start">
        <NavbarBrand
          href="/"
          logo={<img className="navbar__logo-img" src="/assets/icons/thera-icon.svg" alt="Aggarly" />}
          title="Aggarly Platform"
        />

        <NavbarNav ariaLabel="Primary">
          <NavbarItem>
            <NavbarLink href="/workspace" icon={<img className="navbar__icon-img" src="/window.svg" alt="" aria-hidden="true" />} active>
              Workspace
            </NavbarLink>
          </NavbarItem>

          <NavbarItem>
            <NavbarLink href="/files" icon={<img className="navbar__icon-img" src="/file.svg" alt="" aria-hidden="true" />}>
              Files
            </NavbarLink>
          </NavbarItem>

          <NavbarItem>
            <NavbarLink
              href="/portal"
              icon={<img className="navbar__icon-img" src="/globe.svg" alt="" aria-hidden="true" />}
              description="Workspace member & student portal"
            >
              Portal
            </NavbarLink>
          </NavbarItem>
        </NavbarNav>
      </NavbarSection>

      <NavbarSection align="end">
        <NavbarActions>
          <Button variant="ghost" size="sm">Invite</Button>
        </NavbarActions>
      </NavbarSection>
    </Navbar>
  );
}

Navbar With Search + Avatar Action

Common enterprise pattern: search input + account icon. No inline styles.

AggarlyAggarly Platform
  • Dashboard
  • Students
Show code
Navbar with search (JSX)
import { Navbar, NavbarSection, NavbarBrand, NavbarNav, NavbarItem, NavbarLink, NavbarActions, NavbarDivider } from "@/design-system/components/Navbar";
import { Input } from "@/design-system/components/Input";
import { Button } from "@/design-system/components/Button";

export function Example() {
  return (
    <Navbar tone="primary" variant="surface" size="md" elevated>
      <NavbarSection align="start">
        <NavbarBrand
          href="/"
          logo={<img className="navbar__logo-img" src="/assets/icons/thera-icon.svg" alt="Aggarly" />}
          title="Aggarly Platform"
        />

        <NavbarNav ariaLabel="Primary">
          <NavbarItem><NavbarLink href="/dashboard" active>Dashboard</NavbarLink></NavbarItem>
          <NavbarItem><NavbarLink href="/students">Students</NavbarLink></NavbarItem>
        </NavbarNav>
      </NavbarSection>

      <NavbarSection align="end">
        <NavbarActions>
          <div className="navbars-demo-search">
            <Input className="input--sm" placeholder="Search students, IDs, notes…" aria-label="Search" />
          </div>

          <NavbarDivider />

          <Button variant="ghost" size="sm" className="navbar__icon-action" iconOnly aria-label="Account">
            <img className="navbar__icon-img" src="/assets/icons/thera-avatar-icon.svg" alt="" aria-hidden="true" />
          </Button>
        </NavbarActions>
      </NavbarSection>
    </Navbar>
  );
}

Centered Brand Navbar

Centered brand layout for focused workflows (forms, wizards, settings).

AggarlyAggarly Platform
Show code
Centered navbar (JSX)
import { Navbar, NavbarSection, NavbarBrand, NavbarActions } from "@/design-system/components/Navbar";
import { Button } from "@/design-system/components/Button";

export function Example() {
  return (
    <Navbar tone="neutral" variant="surface" elevated>
      <NavbarSection align="start">
        <Button variant="ghost" size="sm">Back</Button>
      </NavbarSection>

      <NavbarSection align="center">
        <NavbarBrand
          href="/"
          logo={<img className="navbar__logo-img" src="/assets/icons/thera-icon.svg" alt="Aggarly" />}
          title="Aggarly Platform"
        />
      </NavbarSection>

      <NavbarSection align="end">
        <NavbarActions>
          <Button variant="primary" size="sm">Save</Button>
        </NavbarActions>
      </NavbarSection>
    </Navbar>
  );
}

Glass Navbar (Premium)

Premium frosted surface tuned for enterprise readability and sticky usage.

AggarlyAggarly PlatformPremium glass bar
  • Dashboard
  • Students
  • Reports
Show code
Glass navbar (JSX)
import { Navbar, NavbarSection, NavbarBrand, NavbarNav, NavbarItem, NavbarLink, NavbarActions } from "@/design-system/components/Navbar";
import { Button } from "@/design-system/components/Button";

export function Example() {
  return (
    <Navbar tone="primary" variant="glass" sticky bordered elevated>
      <NavbarSection align="start">
        <NavbarBrand
          href="/"
          logo={<img className="navbar__logo-img" src="/assets/icons/thera-icon.svg" alt="Aggarly" />}
          title="Aggarly Platform"
          subtitle="Premium glass bar"
        />

        <NavbarNav ariaLabel="Primary">
          <NavbarItem><NavbarLink href="/dashboard" active>Dashboard</NavbarLink></NavbarItem>
          <NavbarItem><NavbarLink href="/students">Students</NavbarLink></NavbarItem>
          <NavbarItem><NavbarLink href="/reports">Reports</NavbarLink></NavbarItem>
        </NavbarNav>
      </NavbarSection>

      <NavbarSection align="end">
        <NavbarActions>
          <Button variant="primary" size="sm">New</Button>
        </NavbarActions>
      </NavbarSection>
    </Navbar>
  );
}

Mobile Collapse (Dropdown)

Responsive collapse (toggle + overlay + dropdown panel). Resize under ~920px to see inline nav hide and toggle appear.

AggarlyAggarly Platform
Show code
Mobile dropdown collapse (JSX)
import { Navbar, NavbarSection, NavbarBrand, NavbarActions, NavbarToggle, NavbarCollapse, NavbarCollapseNav, NavbarCollapseItem, NavbarLink } from "@/design-system/components/Navbar";
import { Button } from "@/design-system/components/Button";

function IconMenu() { /* ... */ }

export function Example() {
  return (
    <Navbar tone="neutral" variant="surface" elevated>
      <NavbarSection align="start">
        <NavbarBrand
          href="/"
          logo={<img className="navbar__logo-img" src="/assets/icons/thera-icon.svg" alt="Aggarly" />}
          title="Aggarly Platform"
        />
      </NavbarSection>

      <NavbarSection align="end">
        <NavbarActions>
          <NavbarToggle asChild>
            <Button variant="ghost" iconOnly aria-label="Open menu">
              <IconMenu />
            </Button>
          </NavbarToggle>
        </NavbarActions>
      </NavbarSection>

      <NavbarCollapse overlay variant="dropdown">
        <NavbarCollapseNav ariaLabel="Mobile">
          <NavbarCollapseItem><NavbarLink href="/dashboard" active>Dashboard</NavbarLink></NavbarCollapseItem>
          <NavbarCollapseItem><NavbarLink href="/students">Students</NavbarLink></NavbarCollapseItem>
          <NavbarCollapseItem><NavbarLink href="/billing">Billing</NavbarLink></NavbarCollapseItem>
          <NavbarCollapseItem><NavbarLink href="/reports" badge={3}>Reports</NavbarLink></NavbarCollapseItem>
        </NavbarCollapseNav>
      </NavbarCollapse>
    </Navbar>
  );
}

Mobile Collapse (Drawer)

Premium drawer navigation with focus trap + scroll lock. Recommended for mobile-first admin/workflow apps.

AggarlyAggarly PlatformDrawer navigation
Show code
Mobile drawer collapse (JSX)
import { Navbar, NavbarSection, NavbarBrand, NavbarActions, NavbarToggle, NavbarCollapse, NavbarCollapseNav, NavbarCollapseItem, NavbarLink, NavbarDivider } from "@/design-system/components/Navbar";
import { Button } from "@/design-system/components/Button";

function IconMenu() { /* ... */ }

export function Example() {
  return (
    <Navbar tone="primary" variant="surface" elevated>
      <NavbarSection align="start">
        <NavbarBrand
          href="/"
          logo={<img className="navbar__logo-img" src="/assets/icons/thera-icon.svg" alt="Aggarly" />}
          title="Aggarly Platform"
          subtitle="Drawer navigation"
        />
      </NavbarSection>

      <NavbarSection align="end">
        <NavbarActions>
          <NavbarToggle asChild>
            <Button variant="ghost" iconOnly aria-label="Open menu">
              <IconMenu />
            </Button>
          </NavbarToggle>
        </NavbarActions>
      </NavbarSection>

      <NavbarCollapse overlay variant="drawer" side="start" trapFocus lockScroll>
        <NavbarCollapseNav ariaLabel="Mobile drawer">
          <NavbarCollapseItem><NavbarLink href="/dashboard" active>Dashboard</NavbarLink></NavbarCollapseItem>
          <NavbarCollapseItem><NavbarLink href="/students">Students</NavbarLink></NavbarCollapseItem>
          <NavbarCollapseItem><NavbarLink href="/billing">Billing</NavbarLink></NavbarCollapseItem>
          <NavbarCollapseItem><NavbarLink href="/reports" badge={3}>Reports</NavbarLink></NavbarCollapseItem>
          <NavbarCollapseItem><NavbarDivider /></NavbarCollapseItem>
          <NavbarCollapseItem><NavbarLink href="/settings">Settings</NavbarLink></NavbarCollapseItem>
          <NavbarCollapseItem><NavbarLink href="/logout" disabled>Logout (disabled)</NavbarLink></NavbarCollapseItem>
        </NavbarCollapseNav>
      </NavbarCollapse>
    </Navbar>
  );
}