Navs
Like everything else in Reflex, creating navs is as easy as writing Markdown.
Navs are placed in the content/navs directory.
Add a new example.mdx nav.
- [Home](/)- [About](/about)- Dropdown- [Item One](/item-one)- [Item Two](/item-two)- [Item Three](/item-three)- [Contact](/contact)- Mega menu- <Block src="name-of-block" />
Display nav
Use the NavMenu component. This will handle dropdown and mobile for you.
<NavMenu name="example" />
Or you can use the useNav hook to retrieve navs and render them manually.
// blocks/example-nav.mdximport { useNav } from "@reflexjs/gatsby-theme-nav"export const ExampleNav = () => {const [nav] = useNav("example")return nav.items ? (<Ul d="grid" col={`repeat(auto, ${nav.items.length})`} gap="4">{nav.items.map(({ value, url, items }, index) => (<Li key={index}><Link href={url}>{value}</Link></Li>))}</Ul>) : null}
Then place them in your page:
<Block src="example-nav" />