导航栏在演练场中打开

自动添加站点前缀

所有的链接都会自动添加 base

使用绝对路径模式

请将 paths.relative 设置为 false

svelte.config.js

import adapter from '@sveltejs/adapter-static'

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

export default config

介绍

传递 navbar 选项给默认主题来配置导航栏

每一项可以包含如下几个属性:

title - 链接文字
to - 链接地址

icon 一个 HTML 字符串，将会覆盖 title，比如您想展示一个自定义的 Twitter 图标时可以这样做：

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/'
}

external - 是否展示外部链接的图标
items - 子链接

仅一层链接

对于现在的 Sveltepress 来说，一个导航栏只能拥有一级子导航

配置示例

vite.config.(js|ts)

import {  } from '@sveltepress/theme-default'
import {  } from '@sveltepress/vite'
import {  } from 'vite'

export default ({
  : [
    ({
      : ({
        : [
          {
            : 'Foo page',
            : '/foo/'
          },
          {
            : '具有下拉',
            : [
              {
                : 'Bar page',
                : '/bar/'
              },
              {
                : 'Github 外部链接',
                : 'https://github.com/',
                : true
              }
            ]
          }
        ]
      })
    })
  ]
})

Expand code

分区标签

分区标签

传入 sectionTabs，即可在导航栏下方显示一行标签，每个标签对应一个文档分区，就像本站这样。侧边栏会跟随当前标签：为每个分区配置独立的侧边栏键，并让每个标签指向该分区中的某个页面。

vite.config.(js|ts)

import {  } from '@sveltepress/theme-default'
import {  } from '@sveltepress/vite'
import {  } from 'vite'

export default ({
  : [
    ({
      : ({
        : [
          { : '开始使用', : '/guide/introduction/', : 'tabler:rocket' },
          { : 'Markdown', : '/guide/markdown/basic-writing/', : 'tabler:markdown' },
          { : '参考', : '/reference/vite-plugin/', : 'tabler:code' },
        ],
        : {
          '/guide/': [/* 开始使用分区的页面 */],
          '/guide/markdown/': [/* Markdown 分区的页面 */],
          '/reference/': [/* 参考分区的页面 */],
        },
      }),
    }),
  ],
})

每个标签可以包含如下属性：

title - 标签文字
to - 分区的入口页面。与导航栏链接一样，它会跟随当前语言和文档版本；外部链接会在新标签页中打开。
icon - 可选。collection:name 形式的 Iconify 图标，例如 tabler:rocket，也可以是一段 HTML 字符串，例如内联 SVG。Iconify 图标需要安装对应的 @iconify-json/* 包。主题会自动预构建传给 defaultTheme() 的 sectionTabs 中的图标；只在某个语言的标签中用到的图标，请加入 preBuildIconifyIcons。
activeMatch - 可选。一个路由前缀或前缀数组，匹配时该标签处于激活状态。

当前页面位于某个标签的分区内时，该标签处于激活状态。默认情况下，分区就是包含该标签 to 链接的最具体的侧边栏键：上例中 Markdown 标签对应 /guide/markdown/。如果标签的链接不在任何侧边栏键之下，它会在自身页面及其下级页面中激活。分区与侧边栏键对不上时，请设置 activeMatch。有多个标签同时匹配时，最具体的那个生效。

分区标签与侧边栏同进同出：在首页，以及 frontmatter 设置了 sidebar: false、header: false 或 layout: false 的页面上都不会显示。在 950px 断点以下，它们会移到侧边栏抽屉的顶部。

在多语言站点中，像 navbar 一样在每个语言的 theme 中设置 sectionTabs，并通过 i18n.sectionTabsLabel 翻译导航的无障碍标签。历史文档版本显示的是当前的标签；冻结版本中存在对应页面时，链接会保留在该版本内。

在 Github 上编辑此页

最后更新于： 2026/10/11 22:56

当前页面

介绍配置示例分区标签

导航栏 在演练场中打开

介绍

配置示例

分区标签

导航栏在演练场中打开