Nav

A horizontal row of navigation links, rendered as underline tabs. For vertical navigation see Navlist.

Basic Usage

<c-ui.nav>
    <c-ui.nav.item href="/" current>Home</c-ui.nav.item>
    <c-ui.nav.item href="/features">Features</c-ui.nav.item>
    <c-ui.nav.item href="/pricing">Pricing</c-ui.nav.item>
    <c-ui.nav.item href="/about">About</c-ui.nav.item>
</c-ui.nav>

{% cotton ui.nav %}
    {% cotton ui.nav.item href="/" current %}Home{% endcotton %}
    {% cotton ui.nav.item href="/features" %}Features{% endcotton %}
    {% cotton ui.nav.item href="/pricing" %}Pricing{% endcotton %}
    {% cotton ui.nav.item href="/about" %}About{% endcotton %}
{% endcotton %}

Current Page

Mark the active item with :current to apply accent styling.

<c-ui.nav>
    <c-ui.nav.item href="/" current>Home</c-ui.nav.item>
    <c-ui.nav.item href="/pricing" :current="{% if request.path == '/pricing' %}True{% endif %}">Pricing</c-ui.nav.item>
</c-ui.nav>

{% cotton ui.nav %}
    {% cotton ui.nav.item href="/" current %}Home{% endcotton %}
    {% cotton ui.nav.item href="/pricing" :current="{% if request.path == '/pricing' %}True{% endif %}" %}Pricing{% endcotton %}
{% endcotton %}

With Badges

Add a trailing badge with the badge prop, styled via badge_color and badge_variant.

<c-ui.nav>
    <c-ui.nav.item href="/">Home</c-ui.nav.item>
    <c-ui.nav.item href="/inbox" badge="12">Inbox</c-ui.nav.item>
    <c-ui.nav.item href="/contacts">Contacts</c-ui.nav.item>
    <c-ui.nav.item href="/calendar" badge="Pro" badge_color="purple" badge_variant="solid">Calendar</c-ui.nav.item>
</c-ui.nav>

{% cotton ui.nav %}
    {% cotton ui.nav.item href="/" %}Home{% endcotton %}
    {% cotton ui.nav.item href="/inbox" badge="12" %}Inbox{% endcotton %}
    {% cotton ui.nav.item href="/contacts" %}Contacts{% endcotton %}
    {% cotton ui.nav.item href="/calendar" badge="Pro" badge_color="purple" badge_variant="solid" %}Calendar{% endcotton %}
{% endcotton %}

API Reference

Nav Props

Name	Description	Type	Options	Default
`slot (default)`	The navigation items.	—	—

Nav.Item Props

Name	Description	Type	Options	Default
`href`	URL the item links to.	str	—	#
`:current`	Applies active styling to mark the current page.	bool	`TrueFalse`	False
`badge`	Trailing badge content.	str	—
`badge_color`	Badge color.	str	`zincredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose`	zinc
`badge_variant`	Badge variant.	str	`pillsolid`