WritedocsWritedocs

Topbar, footer and socials

View as MarkdownView this page as plain textOpen in ChatGPTAsk questions about this pageOpen in ClaudeAsk questions about this pageOpen in PerplexityAsk questions about this page
Connect to CursorUse these docs in CursorConnect to VS CodeUse these docs in VS Code

Topbar

topbar.links adds links at the top right of every page, before the search box:

{
  "topbar": {
    "links": [
      { "label": "Dashboard", "icon": "layout-dashboard", "href": "https://app.example.com" },
      { "label": "Support", "href": "mailto:support@example.com" },
      { "icon": "github", "href": "https://github.com/example/repo" }
    ]
  }
}
href string required

Where the link goes. A link to another site opens in a new tab.

label string

The link’s text.

icon string

Shown before the text, or on its own. Any icon.

A link needs a label, an icon or both. An icon-only link, like the GitHub one above, is announced to screen readers by its icon’s name.

On a phone, the links move into a menu in the topbar.

footer.columns adds columns of links at the bottom of every page:

{
  "footer": {
    "columns": [
      {
        "title": "Product",
        "links": [
          { "label": "Pricing", "href": "https://example.com/pricing" },
          { "label": "Changelog", "icon": "history", "href": "/changelog/" }
        ]
      },
      {
        "title": "Company",
        "links": [
          { "label": "About", "href": "https://example.com/about" },
          { "label": "Careers", "href": "https://example.com/careers" }
        ]
      }
    ]
  }
}
columns array

The columns, left to right.

columns[].title string

The column’s heading. Optional.

columns[].links array

Its links - href, label and icon, the same as the topbar’s.

logo string | object

The footer’s logo - see below.

On a narrow screen, columns wrap onto more rows.

The footer only appears when there’s something in it - columns, or socials. Pages with mode: blank have no footer.

The footer shows the logo from styles.logo, to the left of the columns. footer.logo shows another one there - a single image, or one per theme:

{
  "footer": {
    "logo": {
      "light": "/images/footer-logo-light.svg",
      "dark": "/images/footer-logo-dark.svg"
    }
  }
}

It replaces styles.logo in the footer completely: with only dark set, light mode shows no footer logo. For no logo in the footer, set it to an empty object - "logo": {}.

Socials

socials adds links to your profiles, as a row of icons in the footer. Each key is the icon, and its value the link:

{
  "socials": {
    "github": "https://github.com/example",
    "linkedin": "https://www.linkedin.com/company/example",
    "youtube": "https://www.youtube.com/@example",
    "simple-icons:x": "https://x.com/example",
    "discord": "https://discord.gg/example"
  }
}

A key is any icon: a name like github, or set:name - simple-icons:x - for a brand a plain name doesn’t cover. Simple Icons has most brands, with simple-icons: in front of the name. Each link opens in a new tab, and is announced to screen readers by its name (x, github).