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?