TransparentNavbar

A transparent navigation bar that overlays page content. It starts transparent and can transition to a solid variant on scroll, making it ideal for hero sections and landing pages where the navbar should blend with the background.

Use Cases

• Landing pages with full-screen hero backgrounds
• Pages with background images or videos in header
• Minimalist designs where navbar shouldn’t dominate
• Modern marketing sites with immersive visuals
• Apps requiring subtle, non-intrusive navigation

Properties

brandText

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

brandIcon

Lucide icon name for brand logo. Accepts kebab-case, PascalCase, or lowercase. Type: string.

brandHref

External URL or anchor for brand link. Type: string.

brandTargetPage

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

transparentVariant

Initial transparent appearance variant. Controls text color while transparent. Type: string. Options: light, dark, glass. Default: dark

Tip: dark-backgrounds: Use ‘dark’ — gives white text over dark hero images; light-backgrounds: Use ‘light’ — gives dark text over light hero images; premium: Use ‘glass’ — frosted glass effect even before scrolling.

solidVariant

Variant to transition to after scrolling (when solidOnScroll is true). Controls the solid navbar appearance. Type: string. Options: light, dark, glass. Default: light

Tip: standard: Use ‘light’ for clean solid navbar after scroll; premium: Use ‘glass’ for frosted glass solid navbar; contrast: Use ‘dark’ for bold solid navbar.

solidOnScroll

Whether navbar transitions from transparent to solid variant on scroll. Set false to keep transparent throughout. Type: boolean. Default: true

scrollThreshold

Pixels to scroll before transitioning to solid variant. Only used when solidOnScroll is true. Type: number. Default: 100

Tip: hero-section: Set to hero section height (e.g., 400-600) for smooth transition after hero; quick-transition: Set to 50-100 for immediate transition on scroll.

items

Navigation menu items with optional dropdown sub-items. Type: array. Minimum items: 0. Maximum items: 6.

ctaText

Call-to-action button text. Type: string.

ctaHref

Link destination for CTA button. Type: string.

ctaTargetPage

Target page slug for CTA navigation. Type: string.

stickyTop

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

showModeSelector

Show dark/light mode toggle button. Type: boolean. Default: false

showAuthButton

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

loginButtonText

Text for the login button. Type: string. Default: Sign In

showCartIcon

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

cartTargetPage

Target page slug for cart icon click. Defaults to ‘shop’. Type: string.

customCss

Custom CSS for additional styling. Type: string.

Best Practices

• Use over hero images or gradient backgrounds for immersive effect
• Set transparentVariant='dark' for dark backgrounds, 'light' for light backgrounds
• Enable solidOnScroll=true to transition to solid background after scrolling past hero
• Keep navigation items to 4-6 for clean look
• Set brandText and brandIcon for brand identity
• Use dropdown children for grouped sub-items
• Add visibleToRoles on admin-only items to hide them from regular users