# Sidebar

> Step 1 beside a side column that lists every step of the reset.

URL: https://apogee.avaui.dev/docs/forgot-password-pages/sidebar
Last updated: 2026-10-15

Step 1 beside a side column that lists every step of the reset.

Last updated October 15, 2026

Live example: https://apogee.avaui.dev/examples/forgot-password/sidebar

```astro
---
/**
 * Sidebar: Step 1 beside a side column that lists every step of the reset.
 *
 * @page forgot-password
 */
import { Orbit, KeyRound, Mail, Lock, CircleCheck, ArrowLeft } from '@lucide/astro'
import AuthShell from '@/components/apogee/sections/AuthShell/AuthShell.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Input from '@/components/apogee/Input/Input.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Steps from '@/components/apogee/Steps/Steps.astro'
import ProgressIndicator from '@/components/apogee/ProgressIndicator/ProgressIndicator.astro'

const steps = [
  { title: 'Your email', description: 'Tell us where to send the link', icon: KeyRound },
  { title: 'Check your email', description: 'Follow the link we send', icon: Mail },
  { title: 'Set new password', description: 'Choose a secure password', icon: Lock },
  { title: 'Done', description: 'Log in with your new password', icon: CircleCheck },
]
---

<AuthShell layout="sidebar" heading="Forgot password?" description="No worries, we'll send you reset instructions." pattern="grid">
  <FeaturedIcon slot="brand" theme="outline" color="neutral" size="large"><KeyRound /></FeaturedIcon>

  <form method="post" class="flex flex-col gap-6">
    <Input label="Email" type="email" name="email" placeholder="Enter your email" autocomplete="email" required />
    <Button type="submit" size="large" fullWidth>Reset password</Button>
  </form>

  <Button slot="footer" href="#" variant="ghost" color="neutral">
    <ArrowLeft slot="start" class="rtl:-scale-x-100" aria-hidden="true" />
    Back to log in
  </Button>

  <div slot="below" class="flex justify-center">
    <ProgressIndicator total={4} current={1} variant="dots" aria-label="Reset progress" />
  </div>

  <div slot="panel" class="flex h-full flex-col justify-between gap-16 p-8">
    <div class="flex flex-col gap-16">
      <a href="#" class="flex items-center gap-2 font-semibold">
        <FeaturedIcon theme="solid" color="primary" size="small"><Orbit /></FeaturedIcon>
        Example
      </a>
      <Steps items={steps} current={1} marker="icon" orientation="vertical" aria-label="Reset progress" />
    </div>
    <div class="flex flex-wrap items-center justify-between gap-4 text-sm text-neutral-faded">
      <p>© Example 2026</p>
      <p class="flex items-center gap-2"><Mail class="size-4" aria-hidden="true" /> help@example.com</p>
    </div>
  </div>
</AuthShell>
```

## Add

```sh
npx @ava-ui/apogee add forgot-password/sidebar
```

This copies the page to `src/components/apogee/pages/forgot-password/` with everything it uses: AuthShell, Button, FeaturedIcon, Input, ProgressIndicator, Steps. Render it from one of your routes, or use **Copy code** above.

## Accessibility

-   The page heading is the `h1`; the “Back to log in” arrow flips under right-to-left text.
-   Below `lg` the side column hides; the dots under the form still say “step 1 of 4” to screen readers.

## Related

[

Auth shellThe frame of a log in, sign up or recovery page; brand mark, heading and your form, centred, in a card, beside a panel, or beside a step sidebar.

](https://apogee.avaui.dev/docs/sections/auth-shell)[

ProgressIndicatorStep N of M as a row of segments, for onboarding flows, wizards and carousels. Zero JS.

](https://apogee.avaui.dev/docs/progress-indicator)[

StepsA vertical progress list for onboarding, checkout, and wizard flows.

](https://apogee.avaui.dev/docs/steps)[

Featured iconAn icon in a tinted tile, the glyph that leads an empty state, an alert, a stat or a feature card.

](https://apogee.avaui.dev/docs/featured-icon)