CenterNavbar

A navigation bar that places the brand logo on the left, navigation items centered, and optional action buttons on the right. It creates a balanced, modern layout ideal for sites that want a clean, centered navigation aesthetic.

Use Cases

• Modern landing pages with centered navigation aesthetics
• Portfolio sites with balanced visual layout
• Marketing sites emphasizing clean, centered design
• Apps requiring visual symmetry in navigation
• Sites with limited navigation items (3-5) for best visual balance

Properties

brandText

Brand/company name displayed on left side. Type: string.

Tip: Use company/product name for strong brand identity. Keep to 1-3 words (15 characters max).

brandIcon

Lucide icon name for brand logo. Rendered in gradient circle. Accepts kebab-case, PascalCase, or lowercase formats. Type: string.

Tip: Use both brandIcon and brandText for professional identity.

brandTargetPage

Target page slug for brand logo/text navigation. Defaults to ‘home’. Type: string. Default: home.

leftItems

First half of public page links — displayed LEFT of the centered brand. Split pages evenly between leftItems and rightItems for visual balance. Example: 6 public pages = 3 leftItems + 3 rightItems. Type: array. Min items: 0. Max items: 6.

Tip: Put roughly HALF of public pages here (2-4 items). The other half goes in rightItems. Do NOT put admin pages in leftItems — admin dropdown goes in rightItems.

rightItems

Second half of public page links + admin dropdown — displayed RIGHT of the centered brand. MUST NOT be empty! Put the other half of public pages here, plus any CTA or admin dropdown as last item. Type: array. Min items: 0. Max items: 4.

logoSize

Size of brand logo/icon. Type: string. Options: small, medium, large. Default: medium.

Visual Impact: small – 32px icon, compact brand area; medium – 40px icon (default), balanced size; large – 56px icon, prominent brand presence.

variant

Visual style variant controlling color scheme. Type: string. Options: light, dark, glass. Default: light.

Tip: Use ‘glass’ for modern, premium look over hero images; use ‘light’ for clean, traditional design; use ‘dark’ for bold, high‑contrast aesthetics.

stickyTop

Whether navbar stays fixed at top during scrolling. Type: boolean. Default: true.

showAuthButton

Show login/logout button on far right. Required for apps with authentication. Type: boolean. Default: false.

showCartIcon

Show shopping cart icon (for e-commerce sites). Displays cart item count badge. Type: boolean. Default: false.

cartTargetPage

Target page slug for cart icon click. Defaults to ‘cart’ or ‘shopping-cart’. Type: string.

customCss

Custom CSS styles for advanced customization. Type: string.

Best Practices

• CRITICAL: BOTH leftItems AND rightItems MUST contain items! Never leave rightItems empty — that defeats the centered brand layout
• Split pages evenly: if 6 pages, put 3 in leftItems + 3 in rightItems. If 5 pages, put 3 left + 2 right
• CenterNavbar has NO ‘items’ prop — only leftItems and rightItems exist!
• Admin dropdown ALWAYS goes in rightItems (last item), never in leftItems
• Set brandText and brandIcon for professional brand identity in center
• Choose variant='glass' for premium look over hero backgrounds
• Keep navigation labels short (1-2 words) for clean layout