@reflexjs/gatsby-theme-nav
@reflexjs/gatsby-theme-nav
npm i @reflexjs/gatsby-theme-nav
@reflexjs/gatsby-theme-nav

@reflexjs/gatsby-theme-nav

A library for rapid UI development with style props, color modes, themes and variants + starter kits, themes and blocks to help you build Gatsby and Next.js sites faster.

by reflexjs

0.6.4 (see all)License:MITTypeScript:Not Found
npm i @reflexjs/gatsby-theme-nav
Readme

@reflexjs/gatsby-theme-nav

Handles navigation menus for Reflex.

Installation

npm i @reflexjs/gatsby-theme-nav

Configuration

// gatsby-config.js

module.exports = {
  plugins: [`@reflexjs/gatsby-theme-nav`],
}

Options

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `@reflexjs/gatsby-theme-nav`,
      options: {
        contentPath: "content/navs",
      },
    },
  ],
}

Data models

type NavLink implements Node @dontInfer {
  type: String
  value: String
  url: String
  items: [NavLink]
}

type Nav implements Node @dontInfer {
  id: ID!
  name: String
  items: [NavLink]
}

Usage

Place your navs inside content/navs as follows:

site
  └── content
    └── navs
      └── header.mdx

Then add nav links using markdown:

- [Home](/)
- [About](/about)
- Dropdown
  - [Item One](/item-one)
  - [Item Two](/item-two)
- [Contact](/contact)
- Block dropdown
  - <Block src="name-of-block" />

Mega menu

Creating mega menu is easy. Create a block and add it as a dropdown item.

- Block dropdown
  - <Block src="name-of-block" />

Display nav

Use the useNav hook to retrieve navs and render them in blocks.

// blocks/header-nav.mdx

export const HeaderNav = () => {
  const [nav] = useNav('header')
  return nav.items ? (
    <Ul>
      {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="header-nav" />

Check out the Blocks library for pre-built navs you can copy and drop into your site.

Documentation

Read the docs at https://reflexjs.org/docs/navs.

Downloads/wk

15

GitHub Stars

755

LAST COMMIT

1yr ago

MAINTAINERS

1

CONTRIBUTORS

11

OPEN ISSUES

20

OPEN PRs

9
VersionTagPublished
0.6.4
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate