Theme Configuration

Ardo comes with a beautiful default theme that can be fully customized through the themeConfig option.

Site Title & Logo

export default defineConfig({
  themeConfig: {
    logo: "/logo.svg",
    // or with dark mode variant
    logo: {
      light: "/logo-light.svg",
      dark: "/logo-dark.svg",
    },
    siteTitle: "My Docs",
    // set to false to hide title
    siteTitle: false,
  },
})

Navigation

Configure the top navigation bar:

export default defineConfig({
  themeConfig: {
    nav: [
      { text: "Guide", link: "/guide/introduction" },
      { text: "API", link: "/api-reference" },
      {
        text: "Dropdown",
        items: [
          { text: "Option A", link: "/option-a" },
          { text: "Option B", link: "/option-b" },
        ],
      },
    ],
  },
})

Sidebar

Simple Array

export default defineConfig({
  themeConfig: {
    sidebar: [
      {
        text: "Guide",
        items: [
          { text: "Introduction", link: "/guide/introduction" },
          { text: "Getting Started", link: "/guide/getting-started" },
        ],
      },
    ],
  },
})

Multi-Sidebar

Different sidebars for different sections:

export default defineConfig({
  themeConfig: {
    sidebar: {
      "/guide/": [
        {
          text: "Guide",
          items: [{ text: "Introduction", link: "/guide/introduction" }],
        },
      ],
      "/api/": [
        {
          text: "API Reference",
          items: [{ text: "Config", link: "/api-reference" }],
        },
      ],
    },
  },
})

Collapsible Groups

{
  text: 'Advanced',
  collapsed: true,
  items: [
    { text: 'Plugins', link: '/guide/plugins' },
  ],
}

Social Links

export default defineConfig({
  themeConfig: {
    socialLinks: [
      { icon: "github", link: "https://github.com/..." },
      { icon: "twitter", link: "https://twitter.com/..." },
      { icon: "discord", link: "https://discord.gg/..." },
    ],
  },
})

Supported icons: github, twitter, discord, linkedin, youtube, npm

Footer

export default defineConfig({
  themeConfig: {
    footer: {
      message: "Released under the MIT License.",
      copyright: "Copyright © 2024 Your Name",
    },
  },
})

Search

export default defineConfig({
  themeConfig: {
    search: {
      enabled: true,
      placeholder: "Search docs...",
    },
  },
})

Edit Link

export default defineConfig({
  themeConfig: {
    editLink: {
      pattern: "https://github.com/user/repo/edit/main/docs/:path",
      text: "Edit this page on GitHub",
    },
  },
})

Last Updated

export default defineConfig({
  themeConfig: {
    lastUpdated: {
      enabled: true,
      text: "Last updated",
      formatOptions: {
        year: "numeric",
        month: "long",
        day: "numeric",
      },
    },
  },
})

Outline (TOC)

export default defineConfig({
  themeConfig: {
    outline: {
      level: [2, 3], // Show h2 and h3
      label: "On this page",
    },
  },
})