Navigation
Examples of combining @theme-ui/components to create and style navigation structures.
Menu Bar
A typical menu navigation you'd see on the top of a site
<Flex as="nav" sx={{justifyContent: 'space-between'}}>
<Flex sx={{ alignItems: 'center' }}>
<div>
<NavLink href="#!" sx={{ p: '2', display: 'flex', flexDirection: 'row', alignItems: 'center', fontSize: '2'}}>
<Logo sx={{ minWidth: 40 }}/> Gallery
</NavLink>
</div>
<NavLink href="#!" p={2}>
Docs
</NavLink>
<NavLink href="#!" p={2}>
Blog
</NavLink>
</Flex>
<Box sx={{ display: 'flex', placeItems: 'center' }}>
<Button py={1}>Get Started</Button>
</Box>
</Flex>
Horizontal Navigation
Navigation style menus that run left to right, generally in the header or nav at the top of a page.
Simple
Horizontal list displayed from left to right.
<Flex as="nav">
<NavLink href="#!" p={2}>
Home
</NavLink>
<NavLink href="#!" p={2}>
Blog
</NavLink>
<NavLink href="#!" p={2}>
About
</NavLink>
</Flex>
Contained Link Group
A link group wrapped by a border.
<Flex as="nav" sx={{ width: '100%' }}>
<NavLink href="#!" sx={{ border: '1px solid', borderColor: 'border', textAlign: 'center', borderTopRightRadius: '0', borderBottomRightRadius: '0' }}>
Account
</NavLink>
<NavLink href="#!" sx={{ border: '1px solid', borderColor: 'border', textAlign: 'center', borderRadius: '0' }}>
Notifications
</NavLink>
<NavLink href="#!" sx={{ border: '1px solid', borderColor: 'border', textAlign: 'center', borderTopLeftRadius: '0', borderBottomLeftRadius: '0' }}>
Settings
</NavLink>
</Flex>
Contained Full-rounded
Navigation links with a border and rounded edges displayed horizontally.
<Flex as="nav" sx={{ width: '100%' }}>
<NavLink href="#!" sx={{ border: '1px solid', borderColor: 'border', textAlign: 'center', borderRadius: 0, borderTopLeftRadius: 50, borderBottomLeftRadius: 50 }}>
Account
</NavLink>
<NavLink href="#!" sx={{ border: '1px solid', borderColor: 'border', textAlign: 'center', borderRadius: '0' }}>
Notifications
</NavLink>
<NavLink href="#!" sx={{ border: '1px solid', borderColor: 'border', textAlign: 'center', borderRadius: 0, borderTopRightRadius: 50, borderBottomRightRadius: 50 }}>
Settings
</NavLink>
</Flex>
Vertical Navigation
Navigation style menus that run top to bottom, generally in a sidebar on a page.
Rounded Pills
Simple round pills stacked vertically.
<Flex as="nav" sx={{ width: '50%', flexDirection: 'column' }}>
<NavLink href="#!" sx={{ p: 2, borderRadius: '2'}}>
Home
</NavLink>
<NavLink href="#!" sx={{ p: 2, borderRadius: '2'}}>
Blog
</NavLink>
<NavLink href="#!" sx={{ p: 2, borderRadius: '2'}}>
About
</NavLink>
</Flex>
Pills with Active Right border
Active element styled as a right border to show location in the site.
<Flex as="nav" sx={{ width: '50%', flexDirection: 'column', borderRight: '1px solid', borderColor: 'border' }}>
<NavLink href="#!" sx={{ p: 2, borderRadius: '0', borderRight: '3px solid', borderColor: 'primary', color: 'primary' }}>
Home
</NavLink>
<NavLink href="#!" sx={{ p: 2, borderRadius: '0'}}>
Blog
</NavLink>
<NavLink href="#!" sx={{ p: 2, borderRadius: '0'}}>
About
</NavLink>
</Flex>