Dynamical navigation plugin for gatsbyjs.
MIT License
Dynamical navigation plugin for gatsbyjs.
npm install --save gatsby-dynamical-navigation
gatsby-config.js
...
plugins: [
...`gatsby-dynamical-navigation`
],
...
The algorithm creates GraphQL
nodes using files with .md/.mdx
extensions, located in src/pages
.
Support for other formats is under development
You have such a file structure in src/pages
:
├── index.md
├── lectures
| ├── index.md
| ├── file1.md
| ├── file2.md
| ├── file3.md
The presence of the file index.md
in the root of each folder is necessary for correctly compiling the full navigation of the application
Using frontmatter
:
/index.md
---
title: Home
---
...Content...
/lectures/index.md
---
title: Lectures
---
...Content...
/lectures/file1.md
---
title: lecture 1
navTitle: HTML
order: 1
---
...Content...
/lectures/file2.md
---
title: lecture 2
navTitle: CSS
order: 2
---
...Content...
/lectures/file1.md
---
title: lecture 3
navTitle: JS
order: 3
---
...Content...
The title
and navTitle
fields are used as the text of links for navigation. Moreover, navTitle
overrides title
.
At least one of navTitle
and title
must be defined. Otherwise, the GraphQL
node for this page will not be created.
order
is optional. It is necessary to organize the links when displaying.
Navigation
component APINavigation
is React
component for rendering of navigation
.
import { Navigation } from 'gatsby-dynamical-navigation';
...
<Navigation
root={some path} //vertex path of displayed navigation
target= {some path} //bottom path of displayed navigation (usually location)
loader={React component} // optional. Component that will be displayed until the navigation is loaded
/>
...
You can find an example here:
Site page with left side navigation
(Where root
is /dictionaries/
and target
is /dictionaries/html/1_html_introduction/
)
loadNavigation
APIIf you prefer to create your own navigation instance, you can use this API.
import { loadNavigation } from 'gatsby-dynamical-navigation';
...
loadNavigation(navigation => {
//some kind of code with navigation
})
...
The loadNavigation
allows loading navigation asynchronously.
navigation
is cached. No repeat requests.
navigation
is an array of the type:
[
{
path: string, //path to page
title: string, //text for link (name)
childrenSiteNavigation: { //array of child links
title: string, //path to page
path: string, //text for link (name)
order: number | null, //useful for arranging links when rendering
fields: {
isRoot: true, //means it has child links
} | null //or not
}[]
}
]
Only navigation items with children loaded.
Items without children loaded as children of others.
navigation
would be:[
{
title: Home,
path: '/',
childrenSiteNavigation: [
{
title: Lectures,
path: '/lectures/'
order: null,
fields: {
isRoot: true,
},
},
],
},
{
title: Lectures,
path: '/lectures/'
childrenSiteNavigation: [
{
title: HTML,
path: '/lectures/file1/'
order: 1,
fields: null,
},
{
title: CSS,
path: '/lectures/file2/'
order: 2,
fields: null,
},
{
title: JS,
path: '/lectures/file3/'
order: 3,
fields: null,
},
],
},
]
You can use the GraphQL
nodes as you like.
in page template
...
export const pageQuery = graphql`
query queryName {
allSiteNavigation {
edges {
node {
title
path
order
fields {
isRoot
}
}
}
}
}
`