Navbar

The header is built from two config arrays:

• navbar renders text links and action-style links.
• socials renders compact icon-only links after the navbar.

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

export default defineLotusConfig({
  navbar: [
    { 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-lotus',
      external: true,
      icon: 'github',
    },
    {
      label: 'X',
      href: 'https://x.com/prosefly',
      external: true,
      icon: 'x',
    },
  ],
});

Navbar Items

Every navbar item needs a label and href.

navbar: [
  { 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-lotus',
  external: true,
}

Action Links

Set variant when a navbar 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 Lotus aliases such as external.

Social Links

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

socials: [
  {
    label: 'GitHub',
    href: 'https://github.com/prosefly/astro-theme-lotus',
    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 Lotus aliases such as github, x, discord, and external.

Translated Labels

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

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

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

Mobile Behavior

On desktop, the header renders navbar links, social links, search, language select, and the theme switch inline.

On mobile:

• Search stays in the compact header.
• Navbar links, action links, socials, language select, and the theme switch move into the mobile menu.
• 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.