https://github.com/postor/next-navigation

navigation component for next.js
https://github.com/postor/next-navigation

Last synced: 2 months ago
JSON representation

navigation component for next.js

• Host: GitHub
• URL: https://github.com/postor/next-navigation
• Owner: postor
• Created: 2017-06-21T06:18:46.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-01-05T06:34:08.000Z (over 7 years ago)
• Last Synced: 2025-03-15T09:47:17.344Z (2 months ago)
• Language: JavaScript
• Size: 5.86 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# next-navigation

navigation for next, auto highlight menu item of current route

## usage 

routes.js, use next-routes for both server side and client side route

``` 

const nextRoutes = require('next-routes')

const routes = module.exports = nextRoutes()

routes.add('index', '/')

routes.add('login', '/login')

routes.add('about', '/about')

routes.add('posts', '/posts')

routes.add('post', '/p/:title')

```

Header.js use nav in your page

```

import { default as routes, Link } from './routes'

import getNavigation from 'next-navigation'

const MyNav = getNavigation(routes)

export default (props)=>{

  var { url } = props

  var links = [{

    linkProps: { route: "index" },

    children: Home,

  }, {

    linkProps: { route: "about" },

    children: About,

    activeStyle: { color: 'blue', },

  }, {

    linkProps: { route: "posts" },

    children: Posts,

    checkIsActive: ({ pathname }) => {

      return ('/post' === pathname) || ('/posts' === pathname)

    }

  }]

  const activeStyle = {

    color: 'red',

    backgroundColor: '#ddd',

  }

  {

    ulProps: {

      className: 'mynav',

    },

    links,

    activeStyle,

    activeClassName: 'on',

    url,

  }

  

  return (


    

    {`

        .nav-wrap :global(.mynav) {

          border: 1px solid black;

        }


        .nav-wrap :global(.mynav .on a) {

          font-weight: bold;

        }

      `}

  
)

}


```

## full code example

https://github.com/nextjs-boilerplate/nextjs-boilerplate