@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.
Edit the page on GitHub/** @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) => (<Locationchildren={({ location }) => (<Linkspathname={location.pathname}components={{wrapper: Pagination,}}/>)}/>)