Navbar Configuration
About 266 wordsLess than 1 minute
2026-08-31
navbarConfig.ts configures the top application bar, preset navigation entries, and custom navigation menus.
Presets Table (LinkPresets)
Shirone provides 17 type-safe presets for standard pages:
| Preset Identifier | Target Route | Description |
|---|---|---|
LinkPresets.Home | / | Blog homepage |
LinkPresets.Archive | /archive/ | Chronological archive |
LinkPresets.Friends | /friends/ | Friend links page |
LinkPresets.Moments | /moments/ | Microblogging / status stream |
LinkPresets.Anime | /anime/ | Bangumi / anime watchlist |
LinkPresets.Compass | /compass/ | Site navigation bookmarks |
LinkPresets.Skills | /skills/ | Skills matrix |
LinkPresets.Projects | /projects/ | Project showcase |
LinkPresets.Devices | /devices/ | Hardware devices list |
LinkPresets.Games | /games/ | Games showcase |
LinkPresets.Timeline | /timeline/ | Milestones timeline |
LinkPresets.Albums | /albums/ | Photography albums |
LinkPresets.Categories | /categories/ | Categories index |
LinkPresets.Tags | /tags/ | Tags index |
LinkPresets.Series | /series/ | Serial post series index |
LinkPresets.About | /about/ | About page |
LinkPresets.GitHub | External URL | Theme GitHub repository |
Navigation Structure (links)
export const navbarConfig = withUserConfig("navbar", {
links: [
LinkPresets.Home,
LinkPresets.Archive,
{
name: "Pages",
icon: "material-symbols:widgets-outline",
children: [
LinkPresets.Friends,
LinkPresets.Moments,
LinkPresets.Anime,
LinkPresets.About,
],
},
],
})Custom Links
You can insert custom external or internal navigation items:
{
name: "Documentation",
url: "https://docs.example.com/",
icon: "material-symbols:menu-book-outline",
external: true,
}Content Repo Overlay (Dual-Repo Mode)
In dual-repo setups, create config/nav-bar.yaml in the content repo:
links:
- Home
- Archive
- name: Docs
url: https://docs.example.com/Practical Examples
Compact Navigation
export const navbarConfig = withUserConfig("navbar", {
links: [
LinkPresets.Home,
LinkPresets.Archive,
LinkPresets.About,
],
})FAQ
Dropdown menu does not open
Verify that the children array contains valid navigation items or LinkPresets.
External link icon doesn't show
Add external: true to indicate external navigation targets.
Preset text does not change with language
Preset names are automatically translated via i18n dictionary files in src/i18n/.
Copyright
Copyright Ownership:matsuzaka-yuki
License under:Attribution 4.0 International (CC-BY-4.0)