Sveltepress

Navbar Open in Playground

Auto base

The links configured will be auto prefixed with base

Absolute mode

You need to set paths.relative to false

svelte.config.js
+
import adapter from '@sveltejs/adapter-static'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    paths: {
      relative: false, 
    },
  },
}

export default config
js

Introduction

Pass navbar option to theme default to configure navbar

Each item can hold these props:

  • title - The label text
  • to - The link address
  • icon An HTML string. Will show the html content instead of title. It is useful to display a custom icon on the navbar. For example a twitter svg icon navbar item would be like this: 
    const twitterNavItem = {
  icon: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
      <path fill="currentColor"
        d="M22.46 6c-.77.35-1.6.58-2.46.69c.88-.53 1.56-1.37 1.88-2.38c-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29c0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15c0 1.49.75 2.81 1.91 3.56c-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07a4.28 4.28 0 0 0 4 2.98a8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21C16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56c.84-.6 1.56-1.36 2.14-2.23Z"
      />
  </svg>`,
  to: 'https://twitter.com/'
}
    js
  • external - Determine whether the item is an external link
  • items - Sub links
One level only

For now, navbar can only hold one level sub links.

Example

vite.config.(js|ts)
import {  } from '@sveltepress/theme-default'
import {  } from '@sveltepress/vite'
import {  } from 'vite'

export default ({
  : [
    ({
      : ({
        : [
          {
            : 'Foo page',
            : '/foo/'
          },
          {
            : 'With dropdown',
            : [
              {
                : 'Bar page',
                : '/bar/'
              },
              {
                : 'External Github page',
                : 'https://github.com/',
                : true
              }
            ]
          }
        ]
      })
    })
  ]
})
ts
Expand code
Section tabs

Section tabs

Pass sectionTabs to show a row of tabs under the navbar, one tab per documentation section, like the tabs on this site. The sidebar follows the active tab: give each section its own sidebar key, and point each tab at a page in that section.

vite.config.(js|ts)
import {  } from '@sveltepress/theme-default'
import {  } from '@sveltepress/vite'
import {  } from 'vite'

export default ({
  : [
    ({
      : ({
        : [
          { : 'Get started', : '/guide/introduction/', : 'tabler:rocket' },
          { : 'Markdown', : '/guide/markdown/basic-writing/', : 'tabler:markdown' },
          { : 'Reference', : '/reference/vite-plugin/', : 'tabler:code' },
        ],
        : {
          '/guide/': [/* Get started pages */],
          '/guide/markdown/': [/* Markdown pages */],
          '/reference/': [/* Reference pages */],
        },
      }),
    }),
  ],
})
ts

Each tab can hold these props:

  • title - The tab label
  • to - The section's landing page. Like navbar links, it follows the active locale and documentation version. External URLs open in a new tab.
  • icon - Optional. An Iconify icon in collection:name form, such as tabler:rocket, or an HTML string such as an inline SVG. Iconify icons need the matching @iconify-json/* package. The theme pre-builds the icons of the sectionTabs passed to defaultTheme(); add icons used only by a locale's tabs to preBuildIconifyIcons.
  • activeMatch - Optional. A route prefix, or an array of prefixes, that makes the tab active.

A tab is active while the current page is inside its section. By default, the section is the most specific sidebar key that contains the tab's to link: /guide/markdown/ for the Markdown tab above. A tab whose link is under no sidebar key is active on its own page and the pages below it. Set activeMatch when sections don't line up with sidebar keys. When several tabs match, the most specific one wins.

The tabs travel with the sidebar, so they stay hidden on the home page and on pages whose frontmatter sets sidebar: false, header: false, or layout: false. Below the 950px breakpoint, they move to the top of the sidebar drawer.

On a multi-language site, set sectionTabs in each locale's theme, as with navbar, and translate the navigation label with i18n.sectionTabsLabel. Historical documentation versions show the current tabs; each link stays inside the frozen version when that version has the page.

Suggest changes to this page
Last update at: 2026/10/05 05:32