You can customise the navigation bar that appears at the top of the page with the `navbar` field.
It's made up of two pieces: `structure`, which defines the overall layout, and `components`, which defines what each piece looks like.
This organisation makes it easy to mix and match pkgdown defaults with your own customisations.

This is the default structure:

``` yaml
navbar:
  structure:
    left:  [intro, reference, articles, tutorials, news]
    right: [search, github]
```

It makes use of the the six built-in components:

-   `intro`: "Get Started", which links to a vignette with the same name as the package.
-   `reference`, if there are any `.Rd` files.
-   `articles`, if there are any vignettes or articles.
-   `tutorials`, if there any tutorials.
-   `news`, if `NEWS.md` exists.
-   `search`, the search box (see `vignette("search")` for more details).
-   `github`, a link to the source repository (with an icon), if it can be automatically determined from the `DESCRIPTION`.

You can use the `structure` field to reorganise the navbar without changing the default contents:

``` yaml
navbar:
  structure:
    left:  [search]
    right: [reference, articles]
```

You can use `components` to override the default content.
For example, this yaml provides a custom articles menu:

``` yaml
navbar:
 components:
   articles:
    text: Articles
    menu:
    - text: Category A
    - text: Title A1
      href: articles/a1.html
    - text: Title A2
      href: articles/a2.html
    - text: -------
    - text: "Category B"
    - text: Article B1
      href: articles/b1.html
```

Components uses the same syntax as [RMarkdown menus](https://bookdown.org/yihui/rmarkdown/rmarkdown-site.html#site-navigation).
The elements of `menu` can be:

-   A link (`text` + `href`)

-   A heading (just `text`)

-   A separator (`text: ——–`)

Instead of text, you can also use the name of an `icon`s from [fontawesome](https://fontawesome.com/icons?d=gallery).
You should also provide a textual description in the `aria-label` field for screenreader users.

To add a new component to the navbar, you need to modify both `structure` and `components`.
For example, the following yaml adds a new "twitter" component that appears to the left of the github icon.

``` yaml
navbar:
  structure:
    right: [twitter, github]
  components:
    twitter:
      icon: fa-twitter
      href: http://twitter.com/hadleywickham
      aria-label: Twitter
```

Finally, you can add arbitrary HTML to three locations in the navbar:

```yaml
template:
  includes:
    before_title: <!-- inserted before the package title in the header ->
    before_navbar: <!-- inserted before the navbar links -->
    after_navbar: <!-- inserted after the navbar links -->
```

These includes will appear on all screen sizes, and will not be collapsed into the the navbar drop down.
