Navbar

A responsive navigation bar component for site-wide navigation with support for branding, links, and mobile menus.

Anatomy

<script>
  import {
    Navbar,
    NavbarContent,
    NavbarBrand,
    NavbarItemGroup,
    NavbarItem,
    NavbarLink,
  } from "@saas-ui/svelte/components/navbar";
</script>

<Navbar.Root>
  <NavbarContent>
    <NavbarBrand>Logo</NavbarBrand>
    <NavbarItemGroup>
      <NavbarItem>
        <NavbarLink href="/">Home</NavbarLink>
      </NavbarItem>
      <NavbarItem>
        <NavbarLink href="/about">About</NavbarLink>
      </NavbarItem>
    </NavbarItemGroup>
  </NavbarContent>
</Navbar.Root>

Examples

Basic Accessibility

Basic navbar with default styling, brand, and navigation links.

<Box class="h-20">
	<Navbar.Root>
		<Navbar.Content maxW="max-w-4xl">
			<Navbar.Brand>
				{@render logoSvg()}
			</Navbar.Brand>
			<Navbar.ItemGroup>
				<Navbar.Item>
					<Navbar.Link href="#" active>Home</Navbar.Link>
				</Navbar.Item>
				<Navbar.Item>
					<Navbar.Link href="#">About</Navbar.Link>
				</Navbar.Item>
				<Navbar.Item>
					<Navbar.Link href="#">Contact</Navbar.Link>
				</Navbar.Item>
			</Navbar.ItemGroup>
			<Navbar.ItemGroup justify="end" gap={2}>
				<Navbar.Item>
					<Button size="sm" variant="ghost">Login</Button>
				</Navbar.Item>
				<Navbar.Item>
					<Button size="sm" variant="glass" colour="accent"
						>Sign up</Button>
				</Navbar.Item>
			</Navbar.ItemGroup>
		</Navbar.Content>
	</Navbar.Root>
</Box>

Bordered Accessibility

Navbar with a bottom border using the bordered prop.

<Box class="rounded-l2 h-80 overflow-auto">
	<Navbar.Root position="sticky" bordered>
		<Navbar.Content maxW="max-w-4xl">
			<Navbar.Brand>
				{@render logoSvg()}
			</Navbar.Brand>
			<Navbar.ItemGroup>
				<Navbar.Item>
					<Navbar.Link href="#" active>Home</Navbar.Link>
				</Navbar.Item>
				<Navbar.Item>
					<Navbar.Link href="#">About</Navbar.Link>
				</Navbar.Item>
				<Navbar.Item>
					<Navbar.Link href="#">Contact</Navbar.Link>
				</Navbar.Item>
			</Navbar.ItemGroup>
			<Navbar.ItemGroup justify="end" gap={2}>
				<Navbar.Item>
					<Button size="sm" variant="outline">Login</Button>
				</Navbar.Item>
				<Navbar.Item>
					<Button size="sm" variant="solid" colour="accent"
						>Sign up</Button>
				</Navbar.Item>
			</Navbar.ItemGroup>
		</Navbar.Content>
	</Navbar.Root>
	<Box class="p-6">
		<VStack gap={4}>
			<Box class="bg-bg-muted rounded-l1 h-24 w-full" />
			<Box class="bg-bg-muted rounded-l1 h-24 w-full" />
			<Box class="bg-bg-muted rounded-l1 h-24 w-full" />
			<Box class="bg-bg-muted rounded-l1 h-24 w-full" />
		</VStack>
	</Box>
</Box>

Colours Accessibility

Navbar with different colour palettes using the colour prop.

<VStack gap={4} class="w-full">
	{#each colours as colour}
		<Box class="rounded-l2 w-full overflow-hidden">
			<Navbar.Root
				variant="solid"
				{colour}
				aria-label="{colour} colour navigation"
			>
				<Navbar.Content maxW="max-w-4xl">
					<Navbar.Brand>
						{@render logoSvg("white")}
					</Navbar.Brand>
					<Navbar.ItemGroup>
						<Navbar.Item>
							<Navbar.Link href="#" active>Home</Navbar.Link>
						</Navbar.Item>
						<Navbar.Item>
							<Navbar.Link href="#">About</Navbar.Link>
						</Navbar.Item>
					</Navbar.ItemGroup>
					<Navbar.ItemGroup justify="end">
						<Navbar.Item>
							<Text size="xs" class="text-(--c-contrast)"
								>{colour}</Text>
						</Navbar.Item>
					</Navbar.ItemGroup>
				</Navbar.Content>
			</Navbar.Root>
		</Box>
	{/each}
</VStack>

Glass Variant Accessibility

Glass variant navbar with backdrop blur effect for modern aesthetics.

<Box
	class="rounded-l2 from-accent-muted to-pink-muted h-80 overflow-auto bg-linear-to-br"
>
	<Navbar.Root variant="glass" position="sticky">
		<Navbar.Content maxW="max-w-4xl">
			<Navbar.Brand>
				{@render logoSvg()}
			</Navbar.Brand>
			<Navbar.ItemGroup>
				<Navbar.Item>
					<Navbar.Link href="#" active>Home</Navbar.Link>
				</Navbar.Item>
				<Navbar.Item>
					<Navbar.Link href="#">About</Navbar.Link>
				</Navbar.Item>
				<Navbar.Item>
					<Navbar.Link href="#">Contact</Navbar.Link>
				</Navbar.Item>
			</Navbar.ItemGroup>
			<Navbar.ItemGroup justify="end" gap={2}>
				<Navbar.Item>
					<Button size="sm" variant="ghost">Login</Button>
				</Navbar.Item>
				<Navbar.Item>
					<Button size="sm" variant="glass" colour="accent"
						>Sign up</Button>
				</Navbar.Item>
			</Navbar.ItemGroup>
		</Navbar.Content>
	</Navbar.Root>
	<Box class="p-6">
		<VStack gap={4}>
			<Box class="rounded-l1 h-24 w-full bg-white/50" />
			<Box class="rounded-l1 h-24 w-full bg-white/50" />
			<Box class="rounded-l1 h-24 w-full bg-white/50" />
			<Box class="rounded-l1 h-24 w-full bg-white/50" />
		</VStack>
	</Box>
</Box>

Hide On Scroll Accessibility

Navbar that hides when scrolling down and shows when scrolling up for better content visibility.

<Box class="bg-bg-subtle rounded-l2 h-80 overflow-auto">
	<Navbar.Root position="sticky" bordered shouldHideOnScroll>
		<Navbar.Content maxW="max-w-4xl">
			<Navbar.Brand>
				{@render logoSvg()}
			</Navbar.Brand>
			<Navbar.ItemGroup>
				<Navbar.Item>
					<Navbar.Link href="#" active>Home</Navbar.Link>
				</Navbar.Item>
				<Navbar.Item>
					<Navbar.Link href="#">About</Navbar.Link>
				</Navbar.Item>
				<Navbar.Item>
					<Navbar.Link href="#">Contact</Navbar.Link>
				</Navbar.Item>
			</Navbar.ItemGroup>
			<Navbar.ItemGroup justify="end" gap={2}>
				<Navbar.Item>
					<Button size="sm" variant="outline">Login</Button>
				</Navbar.Item>
				<Navbar.Item>
					<Button size="sm" variant="solid" colour="accent"
						>Sign up</Button>
				</Navbar.Item>
			</Navbar.ItemGroup>
		</Navbar.Content>
	</Navbar.Root>
	<Box class="p-6">
		<VStack gap={4}>
			<Box class="bg-bg-muted rounded-l1 h-24 w-full" />
			<Box class="bg-bg-muted rounded-l1 h-24 w-full" />
			<Box class="bg-bg-muted rounded-l1 h-24 w-full" />
			<Box class="bg-bg-muted rounded-l1 h-24 w-full" />
			<Box class="bg-bg-muted rounded-l1 h-24 w-full" />
			<Box class="bg-bg-muted rounded-l1 h-24 w-full" />
		</VStack>
	</Box>
</Box>

Mobile Navigation Accessibility

Responsive navbar with mobile navigation drawer for smaller screens.

{@const mobileNav = createMobileNav()}
<Box class="bg-bg-subtle rounded-l2 h-80 overflow-auto">
	<Navbar.Root position="sticky" bordered>
		<Navbar.Content maxW="max-w-4xl">
			<Navbar.Brand>
				{@render logoSvg()}
			</Navbar.Brand>
			<Navbar.ItemGroup class="hidden md:flex">
				<Navbar.Item>
					<Navbar.Link href="#">Features</Navbar.Link>
				</Navbar.Item>
				<Navbar.Item>
					<Navbar.Link href="#" active>Customers</Navbar.Link>
				</Navbar.Item>
				<Navbar.Item>
					<Navbar.Link href="#">Integrations</Navbar.Link>
				</Navbar.Item>
				<Navbar.Item>
					<Navbar.Link href="#">Pricing</Navbar.Link>
				</Navbar.Item>
			</Navbar.ItemGroup>
			<Navbar.ItemGroup justify="end" gap={2}>
				<Navbar.Item class="hidden md:flex">
					<Navbar.Link href="#">Login</Navbar.Link>
				</Navbar.Item>
				<Navbar.Item class="hidden md:flex">
					<Button size="sm" variant="glass" colour="accent"
						>Sign Up</Button>
				</Navbar.Item>
				<Navbar.Item class="flex md:hidden">
					<Button
						size="sm"
						variant="ghost"
						aria-label={mobileNav.open
							? "Close menu"
							: "Open menu"}
						onclick={() => mobileNav.toggle()}
					>
						{#if mobileNav.open}
							<Icon as={X} size="sm" weight="bold" />

Solid Variant Accessibility

Solid variant navbar with a coloured background.

<Box class="rounded-l2 h-80 overflow-auto">
	<Navbar.Root variant="solid" colour="accent" position="sticky">
		<Navbar.Content maxW="max-w-4xl">
			<Navbar.Brand>
				{@render logoSvg("white")}
			</Navbar.Brand>
			<Navbar.ItemGroup>
				<Navbar.Item>
					<Navbar.Link href="#" active>Home</Navbar.Link>
				</Navbar.Item>
				<Navbar.Item>
					<Navbar.Link href="#">About</Navbar.Link>
				</Navbar.Item>
				<Navbar.Item>
					<Navbar.Link href="#">Contact</Navbar.Link>
				</Navbar.Item>
			</Navbar.ItemGroup>
			<Navbar.ItemGroup justify="end">
				<Navbar.Item>
					<Navbar.Link href="#">Log in</Navbar.Link>
				</Navbar.Item>
				<Navbar.Item>
					<Navbar.Link href="#">Sign up</Navbar.Link>
				</Navbar.Item>
			</Navbar.ItemGroup>
		</Navbar.Content>
	</Navbar.Root>
	<Box class="p-6">
		<VStack gap={4}>
			<Box class="bg-bg-muted rounded-l1 h-24 w-full" />
			<Box class="bg-bg-muted rounded-l1 h-24 w-full" />
			<Box class="bg-bg-muted rounded-l1 h-24 w-full" />
			<Box class="bg-bg-muted rounded-l1 h-24 w-full" />
		</VStack>
	</Box>
</Box>

Sticky Accessibility

Sticky navbar that stays at the top when scrolling using position="sticky".

<Box class="bg-bg-subtle rounded-l2 h-64 overflow-auto">
	<Navbar.Root position="sticky" bordered>
		<Navbar.Content maxW="max-w-4xl">
			<Navbar.Brand>
				{@render logoSvg()}
			</Navbar.Brand>
			<Navbar.ItemGroup>
				<Navbar.Item>
					<Navbar.Link href="#" active>Home</Navbar.Link>
				</Navbar.Item>
				<Navbar.Item>
					<Navbar.Link href="#">About</Navbar.Link>
				</Navbar.Item>
				<Navbar.Item>
					<Navbar.Link href="#">Contact</Navbar.Link>
				</Navbar.Item>
			</Navbar.ItemGroup>
			<Navbar.ItemGroup justify="end" gap={2}>
				<Navbar.Item>
					<Button size="sm" variant="outline">Login</Button>
				</Navbar.Item>
				<Navbar.Item>
					<Button size="sm" variant="solid" colour="accent"
						>Sign up</Button>
				</Navbar.Item>
			</Navbar.ItemGroup>
		</Navbar.Content>
	</Navbar.Root>
	<Box class="p-6">
		<VStack gap={4}>
			<Box class="bg-bg-muted rounded-l1 h-24 w-full" />
			<Box class="bg-bg-muted rounded-l1 h-24 w-full" />
			<Box class="bg-bg-muted rounded-l1 h-24 w-full" />
			<Box class="bg-bg-muted rounded-l1 h-24 w-full" />
		</VStack>
	</Box>
</Box>

Variants Accessibility

All navbar variants side by side: default, glass, and solid.

<VStack gap={4} class="w-full">
	{#each navbarVariants as variant}
		<Box class="w-full">
			<Text size="sm" class="text-fg-muted mb-2">{variant}</Text>
			<Box
				class={variant === "solid"
					? "bg-accent-solid rounded-l2"
					: "bg-bg-subtle rounded-l2"}
			>
				<Navbar.Root
					{variant}
					colour="accent"
					aria-label="{variant} variant navigation"
				>
					<Navbar.Content maxW="max-w-4xl">
						<Navbar.Brand>
							{@render logoSvg(
								variant === "solid" ? "white" : undefined,
							)}
						</Navbar.Brand>
						<Navbar.ItemGroup>
							<Navbar.Item>
								<Navbar.Link href="#" active>Home</Navbar.Link>
							</Navbar.Item>
							<Navbar.Item>
								<Navbar.Link href="#">About</Navbar.Link>
							</Navbar.Item>
						</Navbar.ItemGroup>
						<Navbar.ItemGroup justify="end" gap={2}>
							{#if variant === "solid"}
								<Navbar.Item>
									<Navbar.Link href="#">Login</Navbar.Link>
								</Navbar.Item>

Props

Prop	Type	Default	Description
`variant`	`default \| glass \| solid`	`default`	The visual style of the component.
`position`	`static \| sticky \| fixed`	`static`	The position of the navbar.
`bordered`	`boolean`	`false`	Whether to show a bottom border.
`colour`	`gray \| red \| orange \| yellow \| green \| teal \| blue \| cyan \| purple \| pink \| rose`	`accent`	The colour palette for solid variant.
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.