cotton

Navbar

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

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.

<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 %}

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

Navbar

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 Default
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. — —