Navbar Configuration
About 157 wordsLess than 1 minute
2025-10-10
Configure the navigation bar structure, including preset entries and custom links.
File Location
src/config/navBarConfig.tsConfiguration Structure
export const navBarConfig: NavBarConfig = {
links: [
LinkPreset.Home, // Home page
LinkPreset.Archive, // Archive page
LinkPreset.About, // About page
LinkPreset.Friends, // Friends page
LinkPreset.Anime, // Anime page
LinkPreset.Diary, // Diary page
{
name: "GitHub",
url: "https://github.com/Spr-Aachen",
external: true,
},
],
};Preset Links
Twilight ships with several preset navigation entries:
LinkPreset.HomeLinkPreset.ArchiveLinkPreset.AboutLinkPreset.FriendsLinkPreset.AnimeLinkPreset.Diary
Custom Links
Add custom items to the navbar by pushing new objects into navBarConfig.links:
name: Display labelurl: Link targetexternal: Set totrueto open in a new tab
Editing the Navbar
- Add links – append presets or custom objects.
- Remove links – delete entries from the array.
- Reorder links – arrange the array to control link order.
Example: Adding a Twitter link
{
links: [
LinkPreset.Home,
LinkPreset.Archive,
// ...other links
{
name: "Twitter",
url: "https://twitter.com/yourusername",
external: true,
},
],
}