Navbar
Top navigation, typically used as primary navigation in websites or stacked application layouts.
Source
Theme source
@saas-ui/core
- 2.10.0 (latest)
Import
Navbar
: The container component that manages composition.NavbarBrand
: The component used for branding.NavbarContent
: The component that contains navbar items.NavbarItem
: A navbar item.NavbarLink
: A navbar link.
import {Navbar,NavbarBrand,NavbarContent,NavbarItem,NavbarLink,} from '@saas-ui/react'
Usage
Basic navbar
import {AppShell,Navbar,NavbarBrand,NavbarContent,NavbarItem,NavbarLink,} from '@saas-ui/react'import {Button,Box,Container,Stack,Skeleton,SkeletonText,} from '@chakra-ui/react'export default function Page() {return (<AppShellnavbar={<Navbar><NavbarBrand><SaasUILogo width="100px" /></NavbarBrand><NavbarContent><NavbarItem><NavbarLink isActive aria-current="page" href="#">Home</NavbarLink></NavbarItem><NavbarItem><NavbarLink href="#">About</NavbarLink></NavbarItem><NavbarItem><NavbarLink href="#">Contact</NavbarLink></NavbarItem></NavbarContent><NavbarContent justifyContent="flex-end" spacing="2"><NavbarItem><Button href="#">Login</Button></NavbarItem><NavbarItem><Button variant="primary">Sign up</Button></NavbarItem></NavbarContent></Navbar>}><Box as="main" flex="1" py="2" px="4"><ContainermaxW="container.xl"pt="8"px="8"display="flex"flexDirection="column"margin="0 auto"><Stack spacing="4" mb="14"><Skeleton width="100px" height="24px" speed={0} /><SkeletonText speed={0} /></Stack><Stack direction="row" spacing="8" mb="14"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack><Stack direction="row" spacing="8" mb="14"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack><Stack direction="row" spacing="8"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack></Container></Box></AppShell>)}
Sticky navbar
Navbar uses position
static by default, you can use sticky
to make it stick to the top of the page.
import {AppShell,Navbar,NavbarBrand,NavbarContent,NavbarItem,NavbarLink,} from '@saas-ui/react'import {Button,Box,Container,Stack,Skeleton,SkeletonText,} from '@chakra-ui/react'export default function Page() {return (<AppShellnavbar={<Navbar position="sticky"><NavbarBrand><SaasUILogo width="100px" /></NavbarBrand><NavbarContent><NavbarItem><NavbarLink isActive aria-current="page" href="#">Home</NavbarLink></NavbarItem><NavbarItem><NavbarLink href="#">About</NavbarLink></NavbarItem><NavbarItem><NavbarLink href="#">Contact</NavbarLink></NavbarItem></NavbarContent><NavbarContent justifyContent="flex-end" spacing="2"><NavbarItem><Button href="#">Login</Button></NavbarItem><NavbarItem><Button variant="primary">Sign up</Button></NavbarItem></NavbarContent></Navbar>}><Box as="main" flex="1" py="2" px="4"><ContainermaxW="container.xl"pt="8"px="8"display="flex"flexDirection="column"margin="0 auto"><Stack spacing="4" mb="14"><Skeleton width="100px" height="24px" speed={0} /><SkeletonText speed={0} /></Stack><Stack direction="row" spacing="8" mb="14"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack><Stack direction="row" spacing="8" mb="14"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack><Stack direction="row" spacing="8"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack></Container></Box></AppShell>)}
Border bottom
Simply add borderBottomWidth="1px"
to the navbar to add a bottom border.
import {AppShell,Navbar,NavbarBrand,NavbarContent,NavbarItem,NavbarLink,} from '@saas-ui/react'import {Button,Box,Container,Stack,Skeleton,SkeletonText,} from '@chakra-ui/react'export default function Page() {return (<AppShellnavbar={<Navbar position="sticky" borderBottomWidth="1px"><NavbarBrand><SaasUILogo width="100px" /></NavbarBrand><NavbarContent><NavbarItem><NavbarLink isActive aria-current="page" href="#">Home</NavbarLink></NavbarItem><NavbarItem><NavbarLink href="#">About</NavbarLink></NavbarItem><NavbarItem><NavbarLink href="#">Contact</NavbarLink></NavbarItem></NavbarContent><NavbarContent justifyContent="flex-end" spacing="2"><NavbarItem><Button href="#">Login</Button></NavbarItem><NavbarItem><Button variant="primary">Sign up</Button></NavbarItem></NavbarContent></Navbar>}><Box as="main" flex="1" py="2" px="4"><ContainermaxW="container.xl"pt="8"px="8"display="flex"flexDirection="column"margin="0 auto"><Stack spacing="4" mb="14"><Skeleton width="100px" height="24px" speed={0} /><SkeletonText speed={0} /></Stack><Stack direction="row" spacing="8" mb="14"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack><Stack direction="row" spacing="8" mb="14"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack><Stack direction="row" spacing="8"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack></Container></Box></AppShell>)}
Blurred background
Using a transparent background with a backdrop blur filter can add a glassy effect to the navbar.
import {AppShell,Navbar,NavbarBrand,NavbarContent,NavbarItem,NavbarLink,} from '@saas-ui/react'import {Button,Box,Container,Stack,Skeleton,SkeletonText,} from '@chakra-ui/react'export default function Page() {return (<AppShellnavbar={<Navbarposition="sticky"borderBottomWidth="1px"background="transparent"backdropFilter="blur(10px)"><NavbarBrand><SaasUILogo width="100px" /></NavbarBrand><NavbarContent><NavbarItem><NavbarLink isActive aria-current="page" href="#">Home</NavbarLink></NavbarItem><NavbarItem><NavbarLink href="#">About</NavbarLink></NavbarItem><NavbarItem><NavbarLink href="#">Contact</NavbarLink></NavbarItem></NavbarContent><NavbarContent justifyContent="flex-end" spacing="2"><NavbarItem><Button href="#">Login</Button></NavbarItem><NavbarItem><Button variant="primary">Sign up</Button></NavbarItem></NavbarContent></Navbar>}><Box as="main" flex="1" py="2" px="4"><ContainermaxW="container.xl"pt="8"px="8"display="flex"flexDirection="column"margin="0 auto"><Stack spacing="4" mb="14"><Skeleton width="100px" height="24px" speed={0} /><SkeletonText speed={0} /></Stack><Stack direction="row" spacing="8" mb="14"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack><Stack direction="row" spacing="8" mb="14"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack><Stack direction="row" spacing="8"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></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.
import {AppShell,Navbar,NavbarBrand,NavbarContent,NavbarItem,NavbarLink,} from '@saas-ui/react'import {Button,Box,Container,Stack,Skeleton,SkeletonText,} from '@chakra-ui/react'export default function Page() {const parentRef = React.useRef(null)return (<Boxref={parentRef}height="400px"overflowY="auto"position="relative"borderRadius="xl"><AppShellnavbar={<NavbarparentRef={parentRef}position="sticky"borderBottomWidth="1px"shouldHideOnScroll><NavbarBrand><SaasUILogo width="100px" /></NavbarBrand><NavbarContent><NavbarItem><NavbarLink isActive aria-current="page" href="#">Home</NavbarLink></NavbarItem><NavbarItem><NavbarLink href="#">About</NavbarLink></NavbarItem><NavbarItem><NavbarLink href="#">Contact</NavbarLink></NavbarItem></NavbarContent><NavbarContent justifyContent="flex-end" spacing="2"><NavbarItem><Button href="#">Login</Button></NavbarItem><NavbarItem><Button variant="primary">Sign up</Button></NavbarItem></NavbarContent></Navbar>}><Box as="main" flex="1" py="2" px="4"><ContainermaxW="container.xl"pt="8"px="8"display="flex"flexDirection="column"margin="0 auto"><Stack spacing="4" mb="14"><Skeleton width="100px" height="24px" speed={0} /><SkeletonText speed={0} /></Stack><Stack direction="row" spacing="8" mb="14"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack><Stack direction="row" spacing="8" mb="14"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack><Stack direction="row" spacing="8"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack></Container></Box></AppShell></Box>)}
With mobile navigation
Add a mobile navigation menu to the navbar using the Drawer
component from @chakra-ui/react
.
import {AppShell,Navbar,NavbarBrand,NavbarContent,NavbarItem,NavbarLink,} from '@saas-ui/react'import {Button,Box,Container,Stack,Skeleton,SkeletonText,Drawer,DrawerBody,DrawerCloseButton,DrawerContent,DrawerHeader,DrawerOverlay,useDisclosure,} from '@chakra-ui/react'import { FiX, FiMenu } from 'react-icons/fi'export default function Page() {const mobileNav = useDisclosure()const menuItems = ['Features', 'Customers', 'Integrations', 'Pricing']return (<AppShellnavbar={<Navbar position="sticky"><NavbarBrand><SaasUILogo width="100px" /></NavbarBrand><NavbarContent display={{ base: 'none', sm: 'flex' }}><NavbarItem><NavbarLink color="foreground" href="#">Features</NavbarLink></NavbarItem><NavbarItem><NavbarLink isActive href="#">Customers</NavbarLink></NavbarItem><NavbarItem><NavbarLink color="foreground" href="#">Integrations</NavbarLink></NavbarItem><NavbarItem><NavbarLink color="foreground" href="#">Pricing</NavbarLink></NavbarItem></NavbarContent><NavbarContent justifyContent="end" spacing="2"><NavbarItem><NavbarLink href="#">Login</NavbarLink></NavbarItem><NavbarItem><Button variant="primary">Sign Up</Button></NavbarItem><Buttonaria-label={mobileNav.isOpen ? 'Close menu' : 'Open menu'}display={{ base: 'inline-flex', sm: 'none' }}onClick={mobileNav.onToggle}variant="ghost">{mobileNav.isOpen ? <FiX /> : <FiMenu />}</Button></NavbarContent><Drawer {...mobileNav}><DrawerOverlay /><DrawerContent><DrawerHeader><DrawerCloseButton /></DrawerHeader><DrawerBody fontSize="md"><NavbarContent flexDirection="column" justifyContent="stretch">{menuItems.map((item, index) => (<NavbarItem key={`${item}-${index}`} width="full"><NavbarLink href="#" width="full" justifyContent="start">{item}</NavbarLink></NavbarItem>))}</NavbarContent></DrawerBody></DrawerContent></Drawer></Navbar>}><Box as="main" flex="1" py="2" px="4"><ContainermaxW="container.xl"pt="8"px="8"display="flex"flexDirection="column"margin="0 auto"><Stack spacing="4" mb="14"><Skeleton width="100px" height="24px" speed={0} /><SkeletonText speed={0} /></Stack><Stack direction="row" spacing="8" mb="14"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack><Stack direction="row" spacing="8" mb="14"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack><Stack direction="row" spacing="8"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack></Container></Box></AppShell>)}
With user menu
Example with an avatar and dropdown menu.
import {AppShell,Navbar,NavbarBrand,NavbarContent,NavbarItem,NavbarLink,PersonaAvatar,} from '@saas-ui/react'import {Button,Box,Container,Stack,Skeleton,SkeletonText,Menu,MenuButton,MenuList,MenuGroup,MenuItem,MenuDivider,useDisclosure,} from '@chakra-ui/react'export default function Page() {return (<AppShellnavbar={<Navbarposition="sticky"borderBottomWidth="1px"background="transparent"backdropFilter="blur(10px)"><NavbarBrand><SaasUILogo width="100px" /></NavbarBrand><NavbarContent display={{ base: 'hidden', sm: 'flex' }}><NavbarItem><NavbarLink color="foreground" href="#">Inbox</NavbarLink></NavbarItem><NavbarItem><NavbarLink isActive color="secondary" href="#">Contacts</NavbarLink></NavbarItem><NavbarItem><NavbarLink color="foreground" href="#">Tasks</NavbarLink></NavbarItem></NavbarContent><NavbarContent as="div" justifyContent="end"><Menu><MenuButton><PersonaAvatarsrc="/showcase-avatar.jpg"name="Beatriz"size="xs"presence="online"/></MenuButton><MenuList><MenuGroup title="beatriz@saas-ui.dev"><MenuItem>Profile</MenuItem><MenuItem>Settings</MenuItem><MenuItem>Help & feedback</MenuItem></MenuGroup><MenuDivider /><MenuItem>Log out</MenuItem></MenuList></Menu></NavbarContent></Navbar>}><Box as="main" flex="1" py="2" px="4"><ContainermaxW="container.xl"pt="8"px="8"display="flex"flexDirection="column"margin="0 auto"><Stack spacing="4" mb="14"><Skeleton width="100px" height="24px" speed={0} /><SkeletonText speed={0} /></Stack><Stack direction="row" spacing="8" mb="14"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack><Stack direction="row" spacing="8" mb="14"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack><Stack direction="row" spacing="8"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack></Container></Box></AppShell>)}
With search input
An example with a global search input.
import { SaasUILogo } from '@saas-ui/assets'import {AppShell,Navbar,NavbarBrand,NavbarContent,NavbarItem,NavbarLink,PersonaAvatar,SearchInput,} from '@saas-ui/react'import {Button,Box,Container,Stack,Skeleton,SkeletonText,Menu,MenuButton,MenuList,MenuGroup,MenuItem,MenuDivider,useDisclosure,} from '@chakra-ui/react'export default function Page() {return (<AppShellnavbar={<Navbarposition="sticky"borderBottomWidth="1px"background="transparent"backdropFilter="blur(10px)"><NavbarBrand><SaasUILogo width="100px" /></NavbarBrand><NavbarContent display={{ base: 'hidden', sm: 'flex' }}><NavbarItem><NavbarLink color="foreground" href="#">Inbox</NavbarLink></NavbarItem><NavbarItem><NavbarLink isActive color="secondary" href="#">Contacts</NavbarLink></NavbarItem><NavbarItem><NavbarLink color="foreground" href="#">Tasks</NavbarLink></NavbarItem></NavbarContent><NavbarContent as="div" justifyContent="end" spacing="4"><Box width="180px"><SearchInput size="sm" /></Box><Menu><MenuButton><PersonaAvatarsrc="/showcase-avatar.jpg"name="Beatriz"size="xs"presence="online"/></MenuButton><MenuList><MenuGroup title="beatriz@saas-ui.dev"><MenuItem>Profile</MenuItem><MenuItem>Settings</MenuItem><MenuItem>Help & feedback</MenuItem></MenuGroup><MenuDivider /><MenuItem>Log out</MenuItem></MenuList></Menu></NavbarContent></Navbar>}><Box as="main" flex="1" py="2" px="4"><ContainermaxW="container.xl"pt="8"px="8"display="flex"flexDirection="column"margin="0 auto"><Stack spacing="4" mb="14"><Skeleton width="100px" height="24px" speed={0} /><SkeletonText speed={0} /></Stack><Stack direction="row" spacing="8" mb="14"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack><Stack direction="row" spacing="8" mb="14"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack><Stack direction="row" spacing="8"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack></Container></Box></AppShell>)}
With breadcrumbs
An example with breadcrumbs and a workspace dropdown menu.
import { SaasUIIcon } from '@saas-ui/assets'import { FiChevronDown } from 'react-icons/fi'import {AppShell,Navbar,NavbarContent,NavbarItem,NavbarLink,PersonaAvatar,SearchInput,} from '@saas-ui/react'import {Button,Box,Breadcrumb,BreadcrumbItem,BreadcrumbLink,Container,Stack,Skeleton,SkeletonText,Menu,MenuButton,MenuList,MenuGroup,MenuItem,MenuDivider,useDisclosure,} from '@chakra-ui/react'export default function Page() {return (<AppShellnavbar={<Navbarposition="sticky"borderBottomWidth="1px"background="transparent"backdropFilter="blur(10px)"><NavbarContent><Breadcrumbseparator={<Box as="span" opacity="0.4">/</Box>}><BreadcrumbItem><Menu><MenuButtonas={Button}variant="ghost"leftIcon={<SaasUIIcon height="24px" />}rightIcon={<FiChevronDown />}>Saas UI</MenuButton><MenuList><MenuGroup title="Workspaces"><MenuItem>Saas UI</MenuItem><MenuItem>Acme</MenuItem></MenuGroup><MenuDivider /><MenuItem>Create workspace</MenuItem></MenuList></Menu></BreadcrumbItem><BreadcrumbItem isCurrentPage><BreadcrumbLink href="#">Overview</BreadcrumbLink></BreadcrumbItem></Breadcrumb></NavbarContent><NavbarContent as="div" justifyContent="end" spacing="4"><Box width="180px"><SearchInput size="sm" /></Box><Menu><MenuButton><PersonaAvatarsrc="/showcase-avatar.jpg"name="Beatriz"size="xs"presence="online"/></MenuButton><MenuList><MenuGroup title="beatriz@saas-ui.dev"><MenuItem>Profile</MenuItem><MenuItem>Settings</MenuItem><MenuItem>Help & feedback</MenuItem></MenuGroup><MenuDivider /><MenuItem>Log out</MenuItem></MenuList></Menu></NavbarContent></Navbar>}><Box as="main" flex="1" py="2" px="4"><ContainermaxW="container.xl"pt="8"px="8"display="flex"flexDirection="column"margin="0 auto"><Stack spacing="4" mb="14"><Skeleton width="100px" height="24px" speed={0} /><SkeletonText speed={0} /></Stack><Stack direction="row" spacing="8" mb="14"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack><Stack direction="row" spacing="8" mb="14"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack><Stack direction="row" spacing="8"><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack><Stack spacing="4" flex="1"><Skeleton width="100px" height="20px" speed={0} /><SkeletonText speed={0} /></Stack></Stack></Container></Box></AppShell>)}
Was this helpful?