@theme-ui/sidenav
    TypeScript icon, indicating that this package has built-in type declarations

    0.12.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

    657

    Version

    0.12.1

    License

    MIT

    Unpacked Size

    56 kB

    Total Files

    13

    Last publish

    Collaborators

    • jxnblk
    • johno
    • hasparus
    • lachlanjc