Falcon UI

navbar

Navbar along with NavbarItem and NavbarItemMenu components accept all of the responsive, theme-based style props for styling customizations.

xxxxxxxxxx
 
import { Navbar, NavbarItem, NavbarItemMenu } from '@deity/falcon-ui';

 
<Box css={{ height: 230, overflow: 'hidden' }}>
  <Navbar>
    <NavbarItem>
      <Link p="sm">Baking</Link>
      <NavbarItemMenu>First: Any content</NavbarItemMenu>
    </NavbarItem>
    <NavbarItem>
      <Link p="sm">Cooking</Link>
      <NavbarItemMenu>Second: Any content</NavbarItemMenu>
    </NavbarItem>
    <NavbarItem>
      <Link p="sm">Dining</Link>
      <NavbarItemMenu>
        <List>
          <ListItem>Item</ListItem>
          <ListItem>Another item</ListItem>
          <ListItem>Last</ListItem>
        </List>
        <Divider my="xs" />
        <List>
          <ListItem>Item</ListItem>
          <ListItem>Another item</ListItem>
          <ListItem>Last</ListItem>
        </List>
      </NavbarItemMenu>
    </NavbarItem>
  </Navbar>
</Box>