Skip to content
Theme UI
GitHub

@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
}}
/>
)}
/>
Edit the page on GitHub
Previous:
@theme-ui/match-media
Next:
@theme-ui/tachyons