Header, footer, and banner

Navbar#

The navbar key adds links and a call-to-action button to the top navigation bar.

{
  "navbar": {
    "links": [
      { "icon": "github", "ariaLabel": "GitHub", "href": "https://github.com/example/repo" },
      { "label": "Community", "href": "https://example.com/community", "icon": "users" }
    ],
    "primary": {
      "label": "Get Started",
      "icon": "rocket",
      "href": "https://example.com/start"
    }
  }
}

Links#

Shown to the left of the theme toggle.

• Set icon to use a brand or lucide icon name.
• Add label when the link should include visible text. Omit it for an icon-only link.
• Add ariaLabel to give an icon-only link an accessible name.
• Set target to "_self" or "_blank" to override the destination-based default.

Primary button#

A highlighted button at the end of the navbar.

• label: visible button text; omit it for an icon-only primary action
• icon: optional brand or lucide icon name
• ariaLabel: accessible text for an icon-only primary action
• href: destination URL
• target: optional "_self" or "_blank" override

Announcement banner#

The banner key shows a site-wide announcement above the header.

{
  "banner": {
    "content": "🚀 v2 is out! [Read the changelog](https://example.com/changelog)",
    "dismissible": true
  }
}

content supports links, **bold**, *italic*, and inline `code`. Set dismissible to true to let visitors close the banner. Their choice is remembered until you change the banner content, so a new announcement appears for everyone.

Footer#

The footer key adds social icons and link columns to the footer.

{
  "footer": {
    "socials": [
      { "icon": "x", "ariaLabel": "X", "href": "https://x.com/example" },
      { "icon": "github", "ariaLabel": "GitHub", "href": "https://github.com/example" }
    ],
    "links": [
      {
        "header": "Resources",
        "items": [
          { "label": "Blog", "href": "https://example.com/blog" },
          { "label": "Careers", "href": "https://example.com/careers" }
        ]
      },
      {
        "header": "Company",
        "items": [
          { "label": "About", "href": "https://example.com/about" },
          { "label": "Privacy", "href": "https://example.com/privacy" }
        ]
      }
    ]
  }
}

Socials#

Social entries use the same generic href, label, icon, ariaLabel, and target fields as navbar links. Labels are visible; omit label for an icon-only link.

Link columns#

Each entry in links renders as a column with an optional header and a list of items. Columns appear above the footer's bottom row.

Attribution#

The Shiso attribution is shown by default. Set attribution to false to hide it.

{
  "footer": {
    "attribution": false
  }
}