Navbar
@xui/navbarThe bar across the top of an application.
Install
pnpm add @xui/navbar Add the barrel to a standalone component's imports:
import { XuiNavbarImports } from '@xui/navbar';
@Component({
imports: [XuiNavbarImports],
// …
})Examples
Default
Loading preview…
<nav xuiNavbar [fixedToTop]="fixedToTop">
<div xuiNavbarGroup>
<span xuiNavbarHeading>xUI</span>
<div xuiNavbarDivider></div>
<a xuiLink color="inherit" underline="hover" href="#">Docs</a>
<a xuiLink color="inherit" underline="hover" href="#">Components</a>
</div>
<div xuiNavbarGroup align="end">
<button xuiButton size="sm" variant="ghost">Sign in</button>
<button xuiButton size="sm">Get started</button>
</div>
</nav>API
The bar across the top of an application.
Variants
fixedToTopfalseInputs
classClassValueThe user-defined classes. Merged last so they win over the variant classes.''fixedToTopbooleanStick to the top of the viewport as the page scrolls.falseA cluster of navbar items pushed to one side.
Variants
alignstartInputs
classClassValueThe user-defined classes. Merged last so they win over the variant classes.''alignXuiNavbarGroupVariants['align']Which end of the navbar the group sits at. Groups are laid out in order, so a start and an end group split the bar between them.'start'The application or section name, usually the first item in the bar.
Inputs
classClassValueThe user-defined classes. Merged last so they win over the base classes.''A vertical rule between navbar groups.
Inputs
classClassValueThe user-defined classes. Merged last so they win over the base classes.''