Nav

Nav composes labeled navigation lists with active and disabled links.

github.com/fastygo/templ/components

Summary

Nav composes labeled navigation lists with active and disabled links.

Use Cases

Render sidebars and top navigation

Render current-page states without custom class helpers

Semantics

Nav root accepts an explicit AriaLabel

Active links default aria-current to page

Disabled or empty links render span with aria-disabled

Example layout.vertical

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Nav(cmp.NavProps{AriaLabel: "Primary navigation"}) {
		@cmp.NavList(cmp.NavListProps{}) {
			@cmp.NavItem(cmp.NavItemProps{}) {
				@cmp.NavLink(cmp.NavLinkProps{Href: "/", Active: true}) { Home }
			}
		}
	}
}

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.Nav(cmp.NavProps{AriaLabel: "Primary navigation"}) {
		@cmp.NavList(cmp.NavListProps{}) {
			@cmp.NavItem(cmp.NavItemProps{}) {
				@cmp.NavLink(cmp.NavLinkProps{Href: "/", Active: true}) { Home }
			}
		}
	}
}

Example state.active

Docs

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.NavLink(cmp.NavLinkProps{Href: "/docs", Active: true}) { Docs }
}

import cmp "github.com/fastygo/templ/components"

templ Example() {
	@cmp.NavLink(cmp.NavLinkProps{Href: "/docs", Active: true}) { Docs }
}

API

LinkVariant · string — role: appearance; enum: default|active|ghost|muted|unstyled; default: default; source: components.nav.NavLinkVariants.variant

Orientation · string — role: direction; enum: vertical|horizontal; default: vertical; source: components.nav.NavListVariants

Size · string — role: density; enum: sm|default|lg; default: default