Navbar
Top navigation, typically used as primary navigation in websites or stacked application layouts.
'use client'
import { SaasUILogo } from '@saas-ui/assets'
import { AppShell, Button, Navbar } from '@saas-ui/react'
export const NavbarBasic = () => {
return (
<AppShell
height="80px"
header={
<Navbar.Root>
<Navbar.Content maxW="4xl">
<Navbar.Brand>
<SaasUILogo width="100px" />
</Navbar.Brand>
<Navbar.ItemGroup>
<Navbar.Item>
<Navbar.Link active aria-current="page" href="#">
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 justifyContent="flex-end" gap="2">
<Navbar.Item>
<Button size="sm" variant="ghost">
Login
</Button>
</Navbar.Item>
<Navbar.Item>
<Button size="sm" variant="glass" colorPalette="accent">
Sign up
</Button>
</Navbar.Item>
</Navbar.ItemGroup>
</Navbar.Content>
</Navbar.Root>
}
/>
)
}
Anatomy
import { Navbar } from '@saas-ui/react/navbar'<Navbar.Root>
<Navbar.Content>
<Navbar.Item>
<Navbar.Link>Home</Navbar.Link>
</Navbar.Item>
</Navbar.Content>
</Navbar.Root>Usage
Sticky navbar
Navbar uses position static by default, you can use sticky to make it stick
to the top of the page.
'use client'
import { SaasUILogo } from '@saas-ui/assets'
import {
AppShell,
Box,
Button,
Container,
Navbar,
Skeleton,
SkeletonText,
Stack,
} from '@saas-ui/react'
export const NavbarSticky = () => {
return (
<AppShell
height="400px"
header={
<Navbar.Root position="sticky">
<Navbar.Content maxW="4xl">
<Navbar.Brand>
<SaasUILogo width="100px" />
</Navbar.Brand>
<Navbar.ItemGroup>
<Navbar.Item>
<Navbar.Link active aria-current="page" href="#">
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 justifyContent="flex-end" gap="2">
<Navbar.Item>
<Button>Login</Button>
</Navbar.Item>
<Navbar.Item>
<Button variant="primary">Sign up</Button>
</Navbar.Item>
</Navbar.ItemGroup>
</Navbar.Content>
</Navbar.Root>
}
>
<Box as="main" flex="1" py="4">
<Container maxW="4xl">
<Stack gap="2" mb="14">
<Skeleton width="100px" height="24px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack direction="row" gap="8" mb="14">
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
</Stack>
<Stack direction="row" gap="8" mb="14">
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
</Stack>
<Stack direction="row" gap="8">
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
</Stack>
</Container>
</Box>
</AppShell>
)
}
Border bottom
Simply add borderBottomWidth="1px" to the navbar to add a bottom border.
'use client'
import { SaasUILogo } from '@saas-ui/assets'
import {
AppShell,
Box,
Button,
Container,
Navbar,
Skeleton,
SkeletonText,
Stack,
} from '@saas-ui/react'
export const NavbarBorderBottom = () => {
return (
<AppShell
height="400px"
header={
<Navbar.Root position="sticky" borderBottomWidth="1px">
<Navbar.Content maxW="4xl">
<Navbar.Brand>
<SaasUILogo width="100px" />
</Navbar.Brand>
<Navbar.ItemGroup>
<Navbar.Item>
<Navbar.Link active aria-current="page" href="#">
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 justifyContent="flex-end" gap="2">
<Navbar.Item>
<Button>Login</Button>
</Navbar.Item>
<Navbar.Item>
<Button variant="primary">Sign up</Button>
</Navbar.Item>
</Navbar.ItemGroup>
</Navbar.Content>
</Navbar.Root>
}
>
<Box as="main" flex="1" py="4">
<Container maxW="4xl">
<Stack gap="2" mb="14">
<Skeleton width="100px" height="24px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack direction="row" gap="8" mb="14">
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
</Stack>
<Stack direction="row" gap="8" mb="14">
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
</Stack>
<Stack direction="row" gap="8">
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
</Stack>
</Container>
</Box>
</AppShell>
)
}
Glass variant
The glass variant will make the background translucent with a blur effect.
'use client'
import { SaasUILogo } from '@saas-ui/assets'
import {
AppShell,
Box,
Button,
Container,
Navbar,
Skeleton,
SkeletonText,
Stack,
} from '@saas-ui/react'
export const NavbarVariantGlass = () => {
return (
<AppShell
height="400px"
header={
<Navbar.Root position="sticky" variant="glass">
<Navbar.Content maxW="4xl">
<Navbar.Brand>
<SaasUILogo width="100px" />
</Navbar.Brand>
<Navbar.ItemGroup>
<Navbar.Item>
<Navbar.Link active aria-current="page" href="#">
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 justifyContent="flex-end" gap="2">
<Navbar.Item>
<Button variant="ghost" size="sm">
Login
</Button>
</Navbar.Item>
<Navbar.Item>
<Button variant="glass" colorPalette="accent" size="sm">
Sign up
</Button>
</Navbar.Item>
</Navbar.ItemGroup>
</Navbar.Content>
</Navbar.Root>
}
>
<Box as="main" flex="1" py="4">
<Container maxW="4xl">
<Stack gap="2" mb="14">
<Skeleton width="100px" height="24px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack direction="row" gap="8" mb="14">
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
</Stack>
<Stack direction="row" gap="8" mb="14">
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
</Stack>
<Stack direction="row" gap="8">
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
</Stack>
</Container>
</Box>
</AppShell>
)
}
Solid variant
The solid variant renders the navbar with solid background color.
'use client'
import { SaasUILogo } from '@saas-ui/assets'
import {
AppShell,
Box,
Button,
Container,
Navbar,
Skeleton,
SkeletonText,
Stack,
} from '@saas-ui/react'
export const NavbarVariantSolid = () => {
return (
<AppShell
height="400px"
header={
<Navbar.Root position="sticky" variant="solid" colorPalette="accent">
<Navbar.Content maxW="4xl">
<Navbar.Brand>
<SaasUILogo width="100px" color="white" />
</Navbar.Brand>
<Navbar.ItemGroup>
<Navbar.Item>
<Navbar.Link active aria-current="page" href="#">
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 justifyContent="flex-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 as="main" flex="1" py="4">
<Container maxW="4xl">
<Stack gap="2" mb="14">
<Skeleton width="100px" height="24px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack direction="row" gap="8" mb="14">
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
</Stack>
<Stack direction="row" gap="8" mb="14">
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
</Stack>
<Stack direction="row" gap="8">
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
</Stack>
</Container>
</Box>
</AppShell>
)
}
Hide on scroll
Setting the shouldHideOnScroll prop to true will hide the navbar when the
user scrolls down and show it when the user scrolls up. Use the parentRef prop
to specify the parent scroll container, defaults to the window object.
'use client'
import { type RefObject, useRef } from 'react'
import { SaasUILogo } from '@saas-ui/assets'
import {
AppShell,
Box,
Button,
Container,
Navbar,
Skeleton,
SkeletonText,
Stack,
} from '@saas-ui/react'
export const NavbarHideOnScroll = () => {
const parentRef = useRef<HTMLElement>(
typeof window !== 'undefined' ? window.document.body : null,
)
return (
<AppShell
height="400px"
ref={(el) => {
if (el) {
parentRef.current = el.parentElement as HTMLDivElement
}
}}
header={
<Navbar.Root
position="sticky"
shouldHideOnScroll
parentRef={parentRef as RefObject<HTMLElement>}
>
<Navbar.Content maxW="4xl">
<Navbar.Brand>
<SaasUILogo width="100px" />
</Navbar.Brand>
<Navbar.ItemGroup>
<Navbar.Item>
<Navbar.Link active aria-current="page" href="#">
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 justifyContent="flex-end" gap="2">
<Navbar.Item>
<Button>Login</Button>
</Navbar.Item>
<Navbar.Item>
<Button variant="primary">Sign up</Button>
</Navbar.Item>
</Navbar.ItemGroup>
</Navbar.Content>
</Navbar.Root>
}
>
<Box as="main" flex="1" py="4">
<Container maxW="4xl">
<Stack gap="2" mb="14">
<Skeleton width="100px" height="24px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack direction="row" gap="8" mb="14">
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
</Stack>
<Stack direction="row" gap="8" mb="14">
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
</Stack>
<Stack direction="row" gap="8">
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
</Stack>
</Container>
</Box>
</AppShell>
)
}
With mobile navigation
Add a mobile navigation menu to the navbar using the Drawer component.
'use client'
import { SaasUILogo } from '@saas-ui/assets'
import {
AppShell,
Box,
Button,
Container,
Drawer,
Navbar,
Skeleton,
SkeletonText,
Stack,
useDisclosure,
} from '@saas-ui/react'
import { FiMenu, FiX } from 'react-icons/fi'
export const NavbarMobileNav = () => {
const mobileNav = useDisclosure()
const menuItems = ['Features', 'Customers', 'Integrations', 'Pricing']
return (
<AppShell
header={
<Navbar.Root position="sticky">
<Navbar.Content maxW="4xl" display={{ base: 'none', sm: 'flex' }}>
<Navbar.Brand>
<SaasUILogo width="100px" />
</Navbar.Brand>
<Navbar.ItemGroup>
<Navbar.Item>
<Navbar.Link color="foreground" href="#">
Features
</Navbar.Link>
</Navbar.Item>
<Navbar.Item>
<Navbar.Link active href="#">
Customers
</Navbar.Link>
</Navbar.Item>
<Navbar.Item>
<Navbar.Link color="foreground" href="#">
Integrations
</Navbar.Link>
</Navbar.Item>
<Navbar.Item>
<Navbar.Link color="foreground" href="#">
Pricing
</Navbar.Link>
</Navbar.Item>
</Navbar.ItemGroup>
<Navbar.ItemGroup justifyContent="end" gap="2">
<Navbar.Item>
<Navbar.Link href="#">Login</Navbar.Link>
</Navbar.Item>
<Navbar.Item>
<Button variant="glass" colorPalette="accent">
Sign Up
</Button>
</Navbar.Item>
<Button
aria-label={mobileNav.open ? 'Close menu' : 'Open menu'}
display={{ base: 'inline-flex', sm: 'none' }}
onClick={mobileNav.onToggle}
variant="ghost"
>
{mobileNav.open ? <FiX /> : <FiMenu />}
</Button>
</Navbar.ItemGroup>
<Drawer.Root {...mobileNav}>
<Drawer.Backdrop />
<Drawer.Content>
<Drawer.Header>
<Drawer.CloseButton />
</Drawer.Header>
<Drawer.Body fontSize="md">
<Navbar.Content
flexDirection="column"
justifyContent="stretch"
>
{menuItems.map((item, index) => (
<Navbar.Item key={`${item}-${index}`} width="full">
<Navbar.Link
href="#"
width="full"
justifyContent="start"
>
{item}
</Navbar.Link>
</Navbar.Item>
))}
</Navbar.Content>
</Drawer.Body>
</Drawer.Content>
</Drawer.Root>
</Navbar.Content>
</Navbar.Root>
}
>
<Box as="main" flex="1" py="4">
<Container maxW="4xl">
<Stack gap="2" mb="14">
<Skeleton width="100px" height="24px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack direction="row" gap="8" mb="14">
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
</Stack>
<Stack direction="row" gap="8" mb="14">
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
</Stack>
<Stack direction="row" gap="8">
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
<Stack gap="2" flex="1">
<Skeleton width="100px" height="20px" variant="none" />
<SkeletonText variant="none" />
</Stack>
</Stack>
</Container>
</Box>
</AppShell>
)
}