Catalog Navigation

<.nav>

ConnieUI.Navigation

Connie

Home

Collapse the sidebar from the button beside the logo.

HEEx 
<div class="relative h-[40rem] w-full transform-gpu overflow-hidden [--top-bar:0px] rounded-lg bg-primary ring-1 ring-secondary ring-inset">
  <div class="flex h-full flex-col lg:flex-row">
    <ConnieUI.Navigation.nav logo_url="/pg/logos/connie.png" product_name="Connie" home_path="/catalog" id="catalog-nav" collapsible>
      <:items>
        <ConnieUI.Navigation.item
          :for={item <- @navigation.items}
          navigate={item.navigate}
          icon={item.icon}
          current={item[:current] || false}
          badge={item[:badge]}
          badge_label={item[:badge_label]}
        >
          {item.label}
        </ConnieUI.Navigation.item>
      </:items>
      <:secondary_items>
        <ConnieUI.Navigation.item
          :for={item <- @navigation.secondary}
          navigate={item.navigate}
          icon={item.icon}
        >
          {item.label}
        </ConnieUI.Navigation.item>
        <ConnieUI.Navigation.separator />
        <ConnieUI.Navigation.support />
      </:secondary_items>
      <:featured_cards>
        <ConnieUI.Navigation.featured_card>
          <ConnieUI.Typography.muted>
            Your trial ends in 12 days. Pick a plan to keep your documents.
          </ConnieUI.Typography.muted>
        </ConnieUI.Navigation.featured_card>
      </:featured_cards>
    </ConnieUI.Navigation.nav>
    <ConnieUI.Layouts.block hspace vspace class="min-w-0 flex-1">
      <ConnieUI.Typography.heading level="h1">Home</ConnieUI.Typography.heading>
      <ConnieUI.Typography.muted>
        Collapse the sidebar from the button beside the logo.
      </ConnieUI.Typography.muted>
    </ConnieUI.Layouts.block>
  </div>
</div>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

:string

URL of the (account or product) logo image

:string

Logo alt text / product name

:string

Where the logo links to

:string

DOM id stem for the sidebar and its controls. Stable by default so the collapse transition is not interrupted by a re-render; pass a distinct value if a page renders more than one nav

let the desktop sidebar collapse to a compact icon strip. The mobile drawer is unaffected

whether the desktop sidebar is collapsed to the icon strip. The host owns this state: the component renders it as given from the first byte, and every toggle pushes a `"nav:mini"` event with `%{"collapsed" => boolean}` for the host to persist and pass back down

Docs

No @doc for this component.

Attribute Type Default Description
logo_url * :string
URL of the (account or product) logo image
product_name * :string
Logo alt text / product name
home_path :string "/"
Where the logo links to
id :string "cui-nav"
DOM id stem for the sidebar and its controls. Stable by default so the collapse transition is not interrupted by a re-render; pass a distinct value if a page renders more than one nav
collapsible :boolean false
let the desktop sidebar collapse to a compact icon strip. The mobile drawer is unaffected
collapsed :boolean false
whether the desktop sidebar is collapsed to the icon strip. The host owns this state: the component renders it as given from the first byte, and every toggle pushes a `"nav:mini"` event with `%{"collapsed" => boolean}` for the host to persist and pass back down
Slot Slot attributes Description
:items
:secondary_items
:featured_cards
:footer
:collapse_spotlight dismiss one-time introduction to the collapse toggle, shown in its tooltip alongside the beacon. Render it only until the member dismisses it