Navbar

The header is built from two config arrays:

• siteNav renders text links and action-style links.
• socials renders compact icon-only links after the site nav.

Use siteNav for primary destinations such as Docs, Blog, Pricing, or an app link. Use socials for external community and repository links.

{
  "siteNav": [
    { "label": "Docs", "href": "/docs/" },
    {
      "label": "Dashboard",
      "href": "https://app.example.com/",
      "external": true,
      "variant": "solid",
      "color": "accent",
      "trailingIcon": "lucide:chevron-right"
    }
  ],
  "socials": [
    {
      "label": "GitHub",
      "href": "https://github.com/prosefly/astro-theme-dahlia",
      "external": true,
      "icon": "github"
    },
    {
      "label": "X",
      "href": "https://x.com/prosefly",
      "external": true,
      "icon": "x"
    }
  ]
}

Site Nav Items

Every site nav item needs a label and href.

siteNav: [
  { label: 'Docs', href: '/docs/' },
  { label: 'Blog', href: '/blog/' },
]

Internal links are localized automatically when they point into the docs route. For example, /docs/configuration/project/ can become /docs/zh-cn/configuration/project/ in the Simplified Chinese locale.

Add external: true for links that should open in a new tab.

{
  label: 'Source',
  href: 'https://github.com/prosefly/astro-theme-dahlia',
  external: true,
}

Action Links

Set variant when a site nav item should read as a call to action instead of a plain text link.

{
  label: 'Get started',
  href: '/docs/overview/',
  variant: 'solid',
  color: 'accent',
  trailingIcon: 'lucide:chevron-right',
}

Supported variants:

color can be neutral or accent. Use accent sparingly for the primary action in the header.

Icons

Navbar action links support trailingIcon.

{
  label: 'Dashboard',
  href: '/dashboard/',
  variant: 'soft',
  trailingIcon: 'lucide:arrow-up-right',
}

Use full Iconify names such as lucide:chevron-right, or supported Dahlia aliases such as external.

Social Links

socials renders compact icon links next to the site nav on desktop and inside the mobile menu on small screens.

socials: [
  {
    label: 'GitHub',
    href: 'https://github.com/prosefly/astro-theme-dahlia',
    external: true,
    icon: 'github',
  },
  {
    label: 'Discord',
    href: 'https://discord.gg/prosefly',
    external: true,
    icon: 'discord',
  },
]

Social links require icon. Icon values can be full Iconify names or Dahlia aliases such as github, x, discord, and external.

Translated Labels

Use translations when the same link should have locale-specific labels.

siteNav: [
  {
    label: 'Docs',
    href: '/docs/',
    translations: {
      'zh-cn': '文档',
    },
  },
]

The fallback label is label. Translation keys match Dahlia locale keys.

Mobile Behavior

On desktop, the header renders site nav links, social links, search, and language select inline.

On mobile:

• Search stays in the compact header.
• Site nav links, action links, and socials move into the mobile menu.
• The language selector stays in the compact header next to the site brand.
• Action links render full width so they remain easy to tap.

Custom Rendering

Use config first. Override components only when the markup or placement needs to change.

See Overriding Components for the override contract.