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>
  )
}

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?