Header

To display a Header block, use the <Header> component.

The Header block is a top-level section that typically includes a logo, navigation links, and user actions. Use it to provide users with easy access to different parts of your website or application.

Preview

AstroLite ☰

• Home
• Features
• Contact

Login Sign up

Seems broken? Check out this test page! I’ll fix this as soon as possible.

Import

src/components/example.astro

import { Header } from 'astro-lite';

Usage

src/components/example.astro

<Header
    logoText="AstroLite"
    logoSrc="/logo.svg"
    logoLink="/home"
    loginText="Login" loginLink="/login"
    signupText="Sign up" signupLink="/signup"
>
    <li><a href="/home">Home</a></li>
    <li><a href="/features">Features</a></li>
    <li><a href="/contact">Contact</a></li>
</Header>

<Header> Props

• logoText (optional)
• logoSrc (optional)
• logoLink (optional)
• loginText (optional)
• loginLink (optional)
• signupText (optional)
• signupLink (optional)
• <slot> (required) -> Use <li> and <a> elements to create navigation links.