# Topbar, footer and socials

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

Links at the top right of every page, columns of links and a logo in the footer, and links to your profiles.

## Topbar

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

```json
{
  "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](https://preview.writedocs.io/docs/content/components/icon/#icons).

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

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

```json
{
  "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](#topbar).

**`logo`** `string | object`

The footer's logo - see [below](#footer-logo).

On a narrow screen, columns wrap onto more rows.

The footer only appears when there's something in it - columns, or [socials](#socials). Pages with `mode: blank` have no footer.

### Footer logo

The footer shows the logo from [`styles.logo`](https://preview.writedocs.io/docs/configuration/logo-and-favicon/), to the left of the columns. `footer.logo` shows another one there - a single image, or one per theme:

```json
{
  "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:

```json
{
  "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](https://preview.writedocs.io/docs/content/components/icon/#icons): a name like `github`, or `set:name` - `simple-icons:x` - for a brand a plain name doesn't cover. [Simple Icons](https://simpleicons.org) 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`).