In pkgdown: Make Static HTML Documentation for a Package

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:

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 or article with the same name as the package[^dots].
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.

[^dots]: Note that dots (.) in the package name need to be replaced by hyphens (-) in the vignette filename to be recognized as the intro. That means for a package foo.bar the intro needs to be named foo-bar.Rmd.

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

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:

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. 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 icons from fontawesome. 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.

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:

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.

You can also customise the colour scheme of the navbar by using the type and bg parameters. See above for details.