2017-02-13 22:43:58 +08:00
# Custom navbar
2017-02-21 14:04:16 +08:00
## HTML
2017-02-13 22:43:58 +08:00
2017-03-10 05:19:07 +08:00
If you need custom navigation, you can create a HTML-based navigation bar.
!> Note that documentation links begin with `#/` .
2017-02-13 22:43:58 +08:00
```html
2017-02-21 14:04:16 +08:00
<!-- index.html -->
2017-02-13 22:43:58 +08:00
< body >
< nav >
< a href = "#/" > EN< / a >
< a href = "#/zh-cn/" > 中文< / a >
< / nav >
< div id = "app" > < / div >
< / body >
```
2017-02-21 14:04:16 +08:00
## Markdown
2017-02-13 22:43:58 +08:00
2017-03-25 15:52:21 +08:00
Alternatively, you can create a custom markdown-based navigation file by setting `loadNavbar` to **true** and creating `_navbar.md` , compare [load-navbar configuration ](configuration.md#load-navbar ).
2017-02-13 22:43:58 +08:00
```html
2017-02-21 14:04:16 +08:00
<!-- index.html -->
2017-02-13 22:43:58 +08:00
< script >
window.$docsify = {
loadNavbar: true
}
< / script >
2017-03-10 05:19:07 +08:00
< script src = "//unpkg.com/docsify/lib/docsify.min.js" > < / script >
2017-02-13 22:43:58 +08:00
```
```markdown
2017-02-21 14:04:16 +08:00
<!-- _navbar.md -->
2017-02-13 22:43:58 +08:00
- [En ](/ )
- [chinese ](/zh-cn/ )
```
2017-02-21 14:04:16 +08:00
!> You need to create a `.nojekyll` in `./docs` to prevent GitHub Pages from ignoring files that begin with an underscore.
`_navbar.md` is loaded from each level directory. If the current directory doesn't have `_navbar.md` , it will fall back to the parent directory. If, for example, the current path is `/guide/quick-start` , the `_navbar.md` will be loaded from `/guide/_navbar.md` .
2017-02-13 22:43:58 +08:00
## Nesting
You can create sub-lists by indenting items that are under a certain parent.
```markdown
2017-02-21 14:04:16 +08:00
<!-- _navbar.md -->
2017-02-13 22:43:58 +08:00
- Getting started
2017-03-25 15:52:21 +08:00
- [Quick start ](quickstart.md )
- [Writing more pages ](more-pages.md )
- [Custom navbar ](custom-navbar.md )
- [Cover page ](cover.md )
2017-02-13 22:43:58 +08:00
- Configuration
2017-03-25 15:52:21 +08:00
- [Configuration ](configuration.md )
- [Themes ](themes.md )
- [Using plugins ](plugins.md )
- [Markdown configuration ](markdown.md )
- [Language highlight ](language-highlight.md )
2017-02-13 22:43:58 +08:00
```
2017-02-21 14:04:16 +08:00
renders as
2017-02-13 22:43:58 +08:00
2017-03-10 05:19:07 +08:00
## Combining custom navbars with the emoji plugin
If you use the [emoji plugin ](plugins#emoji ):
2017-02-13 22:43:58 +08:00
2017-03-10 05:19:07 +08:00
```html
<!-- index.html -->
< script >
window.$docsify = {
// ...
}
< / script >
< script src = "//unpkg.com/docsify/lib/docsify.min.js" > < / script >
< script src = "//unpkg.com/docsify/lib/plugins/emoji.min.js" > < / script >
```
you could, for example, use flag emojis in your custom navbar Markdown file:
```markdown
<!-- _navbar.md -->
- [:us:, :uk: ](/ )
- [:cn: ](/zh-cn/ )
```
