Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@theme-ui/sidenav

0.3.1 • Public • Published

@theme-ui/sidenav

MDX-based sidebar navigation component

npm i @theme-ui/sidenav

Given an MDX document like this:

- [Home](/)
- [About](/about)
- [Guides](/guides)
  - [Getting Started](/guides/getting-started)
  - [Gatsby](/guides/gatsby)

The MDX document can be styled as a sidebar navigation component.

/** @jsx jsx */
import { jsx } from 'theme-ui'
import { Sidenav } from '@theme-ui/sidenav'
import Links from './links.mdx'
 
export default props => (
  <Sidenav {...props}>
    <Links />
  </Sidenav>
)

Alternatively, an accordion style sidenav can be rendered using the AccordionNav component.

/** @jsx jsx */
import { jsx } from 'theme-ui'
import { AccordionNav } from '@theme-ui/sidenav'
import Links from './links.mdx'
 
export default props => (
  <Links
    {...props}
    components={{
      wrapper: AccordionNav,
    }}
  />
)

The same MDX document can be used to create pagination links. Pass in the current pathname to allow the Pagination component to determine the previous and next links.

/** @jsx jsx */
import { jsx } from 'theme-ui'
import { Pagination } from '@theme-ui/sidenav'
import { Location } from '@reach/router'
import Links from './links.mdx'
 
export default props =>
  <Location
    children={({ location }) => (
      <Links
        pathname={location.pathname}
        components={{
          wrapper: Pagination
        }}
      />
    ))}
  />

Install

npm i @theme-ui/sidenav

DownloadsWeekly Downloads

739

Version

0.3.1

License

MIT

Unpacked Size

115 kB

Total Files

13

Last publish

Collaborators

  • avatar
  • avatar