Reflex
  • Blocks
    • Header
    • Hero
    • Features
    • Call to action
    • Forms
    • Pricing
    • Team
    • Testimonials
    • Cards
    • Footer
    • Posts
    • Videos
  • Examples
  • Learn
  • Videos
  • Docs
  • Theme

    Theme reference

    • Colors
    • Font family
    • Font size
    • Font weight
    • Line height
    • Box shadow
    Create a theme Extend base
arshadcnv0.5.3
Reflex
Reflex

Navs

Use navs to build header, footer and other navigation menus using mdx files.

Add a nav

To add a nav, simply create an .mdx file in the /content/navs directory.

Navs uses using simple lists of links.

content/navs/main.mdx
- [Home](/home)
- [Blocks](/blocks)
- [Headers](/blocks/headers)
- [Hero](/blocks/hero)
- [Footers](/blocks/footers)
- [Docs](/docs)
- [Components](/docs/components)
- [Images](/docs/images)

Rendering navs

Once your nav has been created, you can use the NavMenu component to render the nav.

content/blocks/header.mdx
<NavMenu name="example" />

Add dropdown

Add a dropdown by using a nested list.

content/navs/example.mdx
- [Home](/)
- Dropdown
- [Item One](/item-one)
- [Item Two](/item-two)
- [Item Three](/item-three)
- [About](/about)
- [Contact](/contact)

Add mega menu

To create a mega menu, use a block as a dropdown.

Create a block in content/blocks/example-nav-block.mdx

content/blocks/example-nav-block.mdx
<Div>
<Grid p="4" col="1fr 1fr" w="460px" gap="10">
<Div>
<H4 my="0" fontSize="md">
Section One
</H4>
<P mt="2" mb="0" fontSize="sm">
Autem maiores ab praesentium. Blanditiis numquam eaque odit. Corporis
totam sit aliquid.
</P>
</Div>
<Div>
<H4 my="0" fontSize="md">
Section One
</H4>
<P mt="2" mb="0" fontSize="sm">
Autem maiores ab praesentium. Blanditiis numquam eaque odit. Corporis
totam sit aliquid.
</P>
</Div>
</Grid>
<Flexbox bg="muted" px="2" py="2">
<Button variant="link sm">
Learn more
<Icon name="arrow-right" ml="2" size="4" lineHeight="1" />
</Button>
</Flexbox>
</Div>

Next, add this block to your nav.

content/navs/example.mdx
- [Home](/)
- [About](/about)
- Dropdown
- [Item One](/item-one)
- [Item Two](/item-two)
- [Item Three](/item-three)
- Mega menu
- <Block src="example-nav-block" />
- [Contact](/contact)

useNav

The useNav hook can be used to retrieve and filter navs.

blocks/main-nav.mdx
import { useNav } from "@reflexjs/gatsby-theme-nav"
export const MainNav = () => {
const [main] = useNav("main")
return main.items ? (
<Ul>
{main.items.map(({ value, url, items }, index) => (
<Li key={index}>
<Link href={url}>{value}</Link>
</Li>
))}
</Ul>
) : null
}
BlocksImages

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github