Navbars

Horizontal nav with brand, primary links, trailing slot, and a mobile disclosure panel.

Preview

React preview

LiveView (HEEx)

alias DesignSystem.UI.{Avatars, Navbars}

<Navbars.navbar
  id="main-nav"
  brand_label="Goodbones"
  links={[
    %{label: "Dashboard", href: ~p"/", active: @page == :dashboard},
    %{label: "Team", href: ~p"/team", active: false}
  ]}
>
  <:trailing>
    <Avatars.avatar size="sm" src={@current_user.avatar_url} />
  </:trailing>
</Navbars.navbar>

React (JSX)

import { Avatar, Navbar } from "../ui/index.mjs"

<Navbar
  brandLabel="Goodbones"
  links={[
    { label: "Dashboard", href: "/", active: page === "dashboard" },
    { label: "Team", href: "/team" },
  ]}
  trailing={<Avatar size="sm" src={user.avatarUrl} />}
/>