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 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:

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.