Skip to main content

上のメニュー - navbar

どこで設定？​

docusaurus.config.ts の themeConfig > navbar で設定

サイト名など​

docusaurus.config.ts
navbar: {
  title: 'site title',
  logo: {
    alt: 'logo name',
    src: 'img/logo.png',
  },
  ...

スクロールで隠す​

docusaurus.config.ts
navbar: {
  hideOnScroll: true,

サブフォルダ毎にサイドバー作って navbar に足す​

docusaurus.config.ts
navbar: {
  items: [
    {
      type: 'docSidebar',
      sidebarId: 'benrinaMemoSidebar',
      position: 'left',
      label: '',
    },

sidebarId は、sidebar.ts に定義する

sidebar.ts
const sidebars: SidebarsConfig = {
  rootSidebar        : [{type: 'autogenerated', dirName: '.'}],
  benrinaMemoSidebar : [{type: 'autogenerated', dirName: 'benrina-memo'}],

内部リンクを navbar に足す​

docusaurus.config.ts
navbar: {
  items: [
    {
      to: '/docs/osusume/shoseki', // shoseki.md
      label: 'osusume',
      position: 'left',
      // target: '_blank',  // デフォルトタブ内。もし新規タブで開くなら _blank を指定
    },

→ リンクのデフォルトはタブ内

外部リンクを navbar に足す​

docusaurus.config.ts
navbar: {
  items: [
    {
      href: 'https://hokano.sugoi-domain.com/',
      label: 'hoka',
      position: 'right',
      // target: '_self',     // href ではデフォルト新規タブ。もしタブ内で開くなら _self を指定
    },
以下広告