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
2018-02-11 20:12:07 +08:00
Alternatively, you can create a custom markdown-based navigation file by setting `loadNavbar` to **true** and creating `_navbar.md` , compare [loadNavbar configuration ](configuration.md#loadnavbar ).
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 >
2020-02-12 19:40:23 +08:00
< script src = "//cdn.jsdelivr.net/npm/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 -->
2018-02-11 20:12:07 +08:00
* [En ](/ )
* [chinese ](/zh-cn/ )
2017-02-13 22:43:58 +08:00
```
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.
2018-02-11 20:12:07 +08:00
`_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 -->
2018-02-11 20:12:07 +08:00
* Getting started
* [Quick start ](quickstart.md )
* [Writing more pages ](more-pages.md )
* [Custom navbar ](custom-navbar.md )
* [Cover page ](cover.md )
* Configuration
* [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
2018-02-11 20:12:07 +08:00
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 >
2020-02-12 19:40:23 +08:00
< script src = "//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js" > < / script >
< script src = "//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js" > < / script >
2017-03-10 05:19:07 +08:00
```
you could, for example, use flag emojis in your custom navbar Markdown file:
```markdown
<!-- _navbar.md -->
2018-02-11 20:12:07 +08:00
* [:us:, :uk: ](/ )
* [:cn: ](/zh-cn/ )
2017-03-10 05:19:07 +08:00
```
