Navbar

Top navigation, typically used as primary navigation in websites or stacked application layouts.

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 (
<AppShell
navbar={
<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">
<Container
maxW="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 (
<AppShell
navbar={
<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">
<Container
maxW="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 (
<AppShell
navbar={
<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">
<Container
maxW="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 (
<AppShell
navbar={
<Navbar
position="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">
<Container
maxW="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 (
<Box
ref={parentRef}
height="400px"
overflowY="auto"
position="relative"
borderRadius="xl"
>
<AppShell
navbar={
<Navbar
parentRef={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">
<Container
maxW="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 (
<AppShell
navbar={
<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>
<Button
aria-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">
<Container
maxW="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 (
<AppShell
navbar={
<Navbar
position="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>
<PersonaAvatar
src="/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 &amp; feedback</MenuItem>
</MenuGroup>
<MenuDivider />
<MenuItem>Log out</MenuItem>
</MenuList>
</Menu>
</NavbarContent>
</Navbar>
}
>
<Box as="main" flex="1" py="2" px="4">
<Container
maxW="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 (
<AppShell
navbar={
<Navbar
position="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>
<PersonaAvatar
src="/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 &amp; feedback</MenuItem>
</MenuGroup>
<MenuDivider />
<MenuItem>Log out</MenuItem>
</MenuList>
</Menu>
</NavbarContent>
</Navbar>
}
>
<Box as="main" flex="1" py="2" px="4">
<Container
maxW="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 (
<AppShell
navbar={
<Navbar
position="sticky"
borderBottomWidth="1px"
background="transparent"
backdropFilter="blur(10px)"
>
<NavbarContent>
<Breadcrumb
separator={
<Box as="span" opacity="0.4">
/
</Box>
}
>
<BreadcrumbItem>
<Menu>
<MenuButton
as={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>
<PersonaAvatar
src="/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 &amp; feedback</MenuItem>
</MenuGroup>
<MenuDivider />
<MenuItem>Log out</MenuItem>
</MenuList>
</Menu>
</NavbarContent>
</Navbar>
}
>
<Box as="main" flex="1" py="2" px="4">
<Container
maxW="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?