Header navigation

A top bar carries the logo and the sign up link; the form sits below it.

Last updated October 15, 2026

DesktopMobile

Show code

---
/**
 * Header navigation: A top bar carries the logo and the sign up link; the form sits below it.
 *
 * @page log-in
 */
import { Orbit, KeyRound } from '@lucide/astro'
import AuthShell from '@/components/apogee/sections/AuthShell/AuthShell.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import NavLink from '@/components/apogee/NavLink/NavLink.astro'
import Input from '@/components/apogee/Input/Input.astro'
import Checkbox from '@/components/apogee/Checkbox/Checkbox.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Link from '@/components/apogee/Link/Link.astro'
---

<AuthShell heading="Log in to your account" description="Welcome back! Please enter your details.">
  <header slot="header" class="hidden border-b border-neutral-faded md:block">
    <div class="mx-auto flex h-18 max-w-7xl items-center justify-between gap-4 px-8">
      <a href="#" class="flex items-center gap-2 font-semibold">
        <FeaturedIcon theme="solid" color="primary" size="small"><Orbit /></FeaturedIcon>
        Example
      </a>
      <p class="text-neutral-faded">Don't have an account? <Link href="#" underline="hover" class="font-semibold">Sign up</Link></p>
    </div>
  </header>
  <FeaturedIcon slot="brand" theme="solid" color="primary" size="medium" class="md:hidden"><Orbit /></FeaturedIcon>
  <nav slot="intro" aria-label="Account" class="grid w-full grid-cols-2 gap-0.5 rounded-md bg-neutral-faded p-0.5 text-sm">
    <NavLink href="#" class="justify-center aria-[current=page]:bg-page aria-[current=page]:shadow-outline dark:aria-[current=page]:bg-neutral">Sign up</NavLink>
    <NavLink href="#" active class="justify-center aria-[current=page]:bg-page aria-[current=page]:shadow-outline dark:aria-[current=page]:bg-neutral">Log in</NavLink>
  </nav>

  <form method="post" class="flex flex-col gap-6">
    <div class="flex flex-col gap-5">
      <Input label="Email" type="email" name="email" placeholder="Enter your email" autocomplete="email" required />
      <Input label="Password" type="password" name="password" placeholder="••••••••" autocomplete="current-password" required />
    </div>
    <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
      <Checkbox label="Remember for 30 days" name="remember" />
      <Link href="#" underline="hover" class="text-sm font-semibold">Forgot password</Link>
    </div>
    <div class="flex flex-col gap-4">
      <Button type="submit" size="large" fullWidth>Sign in</Button>
      <Button href="#" variant="outline" color="neutral" size="large" fullWidth>
        <KeyRound slot="start" aria-hidden="true" />
        Sign in with SSO
      </Button>
    </div>
  </form>

  <p slot="footer" class="text-neutral-faded md:hidden">
    Don't have an account? <Link href="#" underline="hover" class="font-semibold">Sign up</Link>
  </p>
</AuthShell>

Add

npx @ava-ui/apogee add log-in/header-navigation

This copies the page to src/components/apogee/pages/log-in/ with everything it uses: AuthShell (header slot), Tabs, Input, Checkbox, Button, Link, FeaturedIcon. Render it from one of your routes, or use Copy code above.

Accessibility

The page heading is the h1; the form fields carry visible labels and autocomplete hints, so password managers fill them.
Below md the top bar hides and the sign up link moves under the form, so it is never lost.
The SSO button is a link to your identity provider; swap its href for your own.