Customize Navbar of VitePress

Recap

Terminal

tree -a --dirsfirst --gitignore
.
├── docs
│   ├── public
│   │   └── icon.svg
│   ├── api-examples.md
│   ├── index.md
│   └── markdown-examples.md
├── .vitepress
│   └── config.js
├── .gitignore
├── package.json
└── package-lock.json

4 directories, 8 files

Its simple. You can go to the official docs.

Just remember, Navbar will be customized inside of the /.vitepress/config.mjs

.vitepress/config.mjs

import { defineConfig } from "vitepress";

export default defineConfig({
  // ...
  themeConfig: {
    nav: [
      { text: "Home", link: "/" },
      { text: "Examples", link: "/markdown-examples" },
    ],
    // ...
  },
  // ...
});

Change Navbar Title

.vitepress/config.mjs

import { defineConfig } from "vitepress";

export default defineConfig({
  // ...
  themeConfig: {
    siteTitle: 'My Custom Title'
    // ...
  },
  // ...
});

Add Navbar Icon

.vitepress/config.mjs

import { defineConfig } from "vitepress";

export default defineConfig({
  // ...
  themeConfig: {
    logo: '/my-logo.svg'
    // ...
  },
  // ...
});

INFO

Its just importing the svg from the /docs/public/icon.svg. So, just use the /icon.svg

Adding Links

.vitepress/config.mjs

import { defineConfig } from "vitepress";

export default defineConfig({
  // ...
  themeConfig: {
    nav: [
      { text: "Home", link: "/" },
      { text: "Examples", link: "/markdown-examples" },
      { text: "Docs", link: "/api-examples" },
    ],
    // ...
  },
  // ...
});

Adding a link is just adding an object.

Adding a Dropdown

.vitepress/config.mjs

import { defineConfig } from "vitepress";

export default defineConfig({
  // ...
  themeConfig: {
    nav: [
      { text: "Home", link: "/" },
      { text: "Examples", link: "/markdown-examples" },
      { text: "Docs", link: "/api-examples" },
      {
        text: "Dropdown Menu",
        items: [    
          {
            text: "Section Title",
            items: [    
              { text: "Section A Item A", link: "..." },
              { text: "Section B Item B", link: "..." },
            ],
          },
        ],
      },
    ],
    // ...
  },
  // ...
});

Adding a dropdown is just adding an object which has an array.

Social Links

.vitepress/config.mjs

import { defineConfig } from "vitepress";

export default defineConfig({
  // ...
  themeConfig: {
    // ...
     socialLinks: [
      {
        icon: "github",
        link: "https://github.com/MdSakifHossain/Ultimate-Manual",
      },
    ],
    // ...
  },
  // ...
});

TIP

If you wanna add more social links then go to the official docs. becaues its just a Manual for Future Me

Reference

Offical Docs 🚀