Navbar

Basic Usage

Resize the window to see the links and actions collapse behind a menu button.

Acme

<c-ui.navbar>
    <c-slot name="brand">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-6 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 12v2a2 2 0 0 1-2 2H9a1 1 0 0 0-1 1v3a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2h0"/><path d="M4 16a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3a1 1 0 0 1-1 1h-5a2 2 0 0 0-2 2v2"/></svg>
        <span class="font-semibold">Acme</span>
    </c-slot>

    <c-ui.navbar.item href="#" :current="True">Dashboard</c-ui.navbar.item>
    <c-ui.navbar.item href="#">Projects</c-ui.navbar.item>
    <c-ui.navbar.item href="#">Team</c-ui.navbar.item>
    <c-ui.navbar.item href="#">Settings</c-ui.navbar.item>

    <c-slot name="actions">
        <c-ui.button size="sm">Sign in</c-ui.button>
    </c-slot>
</c-ui.navbar>

{% cotton ui.navbar %}
    {% cotton:slot brand %}
        <svg xmlns="http://www.w3.org/2000/svg" class="size-6 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 12v2a2 2 0 0 1-2 2H9a1 1 0 0 0-1 1v3a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2h0"/><path d="M4 16a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3a1 1 0 0 1-1 1h-5a2 2 0 0 0-2 2v2"/></svg>
        <span class="font-semibold">Acme</span>
    {% endcotton:slot %}

    {% cotton ui.navbar.item href="#" :current="True" %}Dashboard{% endcotton %}
    {% cotton ui.navbar.item href="#" %}Projects{% endcotton %}
    {% cotton ui.navbar.item href="#" %}Team{% endcotton %}
    {% cotton ui.navbar.item href="#" %}Settings{% endcotton %}

    {% cotton:slot actions %}
        {% cotton ui.button size="sm" %}Sign in{% endcotton %}
    {% endcotton:slot %}
{% endcotton %}

Variants

variant sets how the desktop nav items look: text (default), underline, pill or ghost. The mobile menu always uses a plain stacked style regardless.

text (default)

Acme

underline

Acme

pill

Acme

ghost

Acme

<c-ui.navbar variant="underline">
    <c-slot name="brand">...</c-slot>
    <c-ui.navbar.item href="#" :current="True">Dashboard</c-ui.navbar.item>
    <c-ui.navbar.item href="#">Projects</c-ui.navbar.item>
    <c-ui.navbar.item href="#">Team</c-ui.navbar.item>
</c-ui.navbar>

{% cotton ui.navbar variant="underline" %}
    {% cotton:slot brand %}...{% endcotton:slot %}
    {% cotton ui.navbar.item href="#" :current="True" %}Dashboard{% endcotton %}
    {% cotton ui.navbar.item href="#" %}Projects{% endcotton %}
    {% cotton ui.navbar.item href="#" %}Team{% endcotton %}
{% endcotton %}

Dropdowns

Drop a c-ui.dropdown straight into the navbar for menus. Give it a trigger styled to match your nav items; the menu can be a simple list or a multi-column layout.

Acme

<c-ui.navbar>
    <c-ui.navbar.item href="#" :current="True">Dashboard</c-ui.navbar.item>

    <c-ui.dropdown align="start">
        <c-slot name="trigger">
            <button type="button" class="inline-flex items-center gap-1 px-3 md:px-2 py-2 text-sm font-medium ...">
                Resources
                <svg><!-- chevron --></svg>
            </button>
        </c-slot>
        <c-ui.dropdown.item href="#">Documentation</c-ui.dropdown.item>
        <c-ui.dropdown.item href="#">Guides</c-ui.dropdown.item>
    </c-ui.dropdown>

    {# multi-column: any layout in the dropdown body #}
    <c-ui.dropdown align="start" min_width="34rem">
        <c-slot name="trigger"> ... Solutions ... </c-slot>
        <div class="grid grid-cols-2 gap-1 p-2">
            <div> ...column... </div>
            <div> ...column... </div>
        </div>
    </c-ui.dropdown>
</c-ui.navbar>

{% cotton ui.navbar %}
    {% cotton ui.navbar.item href="#" :current="True" %}Dashboard{% endcotton %}

    {% cotton ui.dropdown align="start" %}
        {% cotton:slot trigger %}
            <button type="button" class="inline-flex items-center gap-1 px-3 md:px-2 py-2 text-sm font-medium ...">
                Resources
                <svg><!-- chevron --></svg>
            </button>
        {% endcotton:slot %}
        {% cotton ui.dropdown.item href="#" %}Documentation{% endcotton %}
        {% cotton ui.dropdown.item href="#" %}Guides{% endcotton %}
    {% endcotton %}

    {# multi-column: any layout in the dropdown body #}
    {% cotton ui.dropdown align="start" min_width="34rem" %}
        {% cotton:slot trigger %} ... Solutions ... {% endcotton:slot %}
        <div class="grid grid-cols-2 gap-1 p-2">
            <div> ...column... </div>
            <div> ...column... </div>
        </div>
    {% endcotton %}
{% endcotton %}

Mobile menu

The links and actions are mirrored into the mobile menu automatically. Use the mobile slot for nav shown only on mobile (for example a c-ui.navlist of secondary links that live in a sidebar on desktop), and set :drawer="True" to open the menu as a slide-over instead of an inline collapse. Resize the window and open the menu to compare.

Acme

<c-ui.navbar :drawer="True">
    <c-slot name="brand">...</c-slot>

    <c-ui.navbar.item href="#" :current="True">Dashboard</c-ui.navbar.item>
    <c-ui.navbar.item href="#">Projects</c-ui.navbar.item>

    <c-slot name="actions">
        <c-ui.button size="sm">Sign in</c-ui.button>
    </c-slot>

    {# shown only in the mobile menu #}
    <c-slot name="mobile">
        <c-ui.navlist variant="sidebar">
            <c-ui.navlist.group heading="Resources">
                <c-ui.navlist.item href="#">Docs</c-ui.navlist.item>
                <c-ui.navlist.item href="#">Changelog</c-ui.navlist.item>
            </c-ui.navlist.group>
        </c-ui.navlist>
    </c-slot>
</c-ui.navbar>

{% cotton ui.navbar :drawer="True" %}
    {% cotton:slot brand %}...{% endcotton:slot %}

    {% cotton ui.navbar.item href="#" :current="True" %}Dashboard{% endcotton %}
    {% cotton ui.navbar.item href="#" %}Projects{% endcotton %}

    {% cotton:slot actions %}
        {% cotton ui.button size="sm" %}Sign in{% endcotton %}
    {% endcotton:slot %}

    {# shown only in the mobile menu #}
    {% cotton:slot mobile %}
        {% cotton ui.navlist variant="sidebar" %}
            {% cotton ui.navlist.group heading="Resources" %}
                {% cotton ui.navlist.item href="#" %}Docs{% endcotton %}
                {% cotton ui.navlist.item href="#" %}Changelog{% endcotton %}
            {% endcotton %}
        {% endcotton %}
    {% endcotton:slot %}
{% endcotton %}

API Reference

Name	Description	Type	Options	Default
`sticky`	Pin the header to the top of the viewport while scrolling.	bool	—	True
`variant`	Desktop nav item style. The mobile menu always uses a plain stacked style.	str	`textunderlinepillghost`	text
`:drawer`	Open the mobile menu as a slide-over (c-ui.drawer) instead of an inline collapse.	bool	`TrueFalse`	False
`class`	Additional classes merged onto the header element.	str	—

Navbar Slots

Name	Description	Type	Options
`brand`	Left region, typically a logo and product name.	—	—
`slot (default)`	Primary navigation links, usually Navbar.Item components.	—	—
`actions`	Right region for actions such as buttons or an avatar.	—	—
`mobile`	Content shown only in the mobile menu, below the mirrored links and actions. Ideal for a c-ui.navlist of secondary nav that is hidden on desktop.	—	—

Navbar.Item

Name	Description	Type	Options	Default
`href`	Link destination.	str	—	#
`current`	Marks the active link and applies the accent style.	bool	—	False
`class`	Additional classes merged onto the link.	str	—
`slot (default)`	The link label.	—	—

Navbar

A top-level application header with brand, navigation links and right-side actions that collapse into a menu on small screens.

Basic Usage

Variants

Dropdowns

Mobile menu

API Reference

Navbar

Navbar Slots

Navbar.Item