## Documentation index

This index lists every available documentation page and its Markdown source.

- [Documentation](https://vara.varavel.com/docs/index.md)
  - [Introduction](https://vara.varavel.com/docs/introduction/index.md)
  - [Getting Started](https://vara.varavel.com/docs/getting-started/index.md)
    - [Installation](https://vara.varavel.com/docs/getting-started/installation/index.md)
    - [Quick Start](https://vara.varavel.com/docs/getting-started/quick-start/index.md)
    - [Composing a Landing Page](https://vara.varavel.com/docs/getting-started/composing-landing-page/index.md)
  - [Fundamentals](https://vara.varavel.com/docs/fundamentals/index.md)
    - [Project Structure](https://vara.varavel.com/docs/fundamentals/project-structure/index.md)
    - [Page Generators](https://vara.varavel.com/docs/fundamentals/page-generators/index.md)
    - [Site Settings](https://vara.varavel.com/docs/fundamentals/site-settings/index.md)
    - [Search and LLM Output](https://vara.varavel.com/docs/fundamentals/search-and-llms/index.md)
    - [Customization](https://vara.varavel.com/docs/fundamentals/customization/index.md)
    - [Functions and Filters](https://vara.varavel.com/docs/fundamentals/functions-and-filters/index.md)
  - [Templates](https://vara.varavel.com/docs/templates/index.md)
    - [vara-landing](https://vara.varavel.com/docs/templates/landing/index.md)
    - [vara-docs](https://vara.varavel.com/docs/templates/docs/index.md)
    - [vara-docs-raw](https://vara.varavel.com/docs/templates/docs-raw/index.md)
    - [vara-docs-search-index](https://vara.varavel.com/docs/templates/docs-search-index/index.md)
    - [vara-docs-llms-txt](https://vara.varavel.com/docs/templates/docs-llms-txt/index.md)
    - [vara-docs-llms-full-txt](https://vara.varavel.com/docs/templates/docs-llms-full-txt/index.md)
    - [vara-sitemap-xml](https://vara.varavel.com/docs/templates/sitemap-xml/index.md)
    - [vara-404](https://vara.varavel.com/docs/templates/404/index.md)
  - [Components](https://vara.varavel.com/docs/components/index.md)
    - [Alert](https://vara.varavel.com/docs/components/alert/index.md)
    - [Badge](https://vara.varavel.com/docs/components/badge/index.md)
    - [Button](https://vara.varavel.com/docs/components/button/index.md)
    - [Container](https://vara.varavel.com/docs/components/container/index.md)
    - [Icon](https://vara.varavel.com/docs/components/icon/index.md)
    - [Keyboard Key](https://vara.varavel.com/docs/components/kbd/index.md)
    - [Header](https://vara.varavel.com/docs/components/header/index.md)
    - [Hero](https://vara.varavel.com/docs/components/hero/index.md)
    - [Content Split](https://vara.varavel.com/docs/components/content-split/index.md)
    - [Features](https://vara.varavel.com/docs/components/features/index.md)
    - [Stats](https://vara.varavel.com/docs/components/stats/index.md)
    - [FAQ](https://vara.varavel.com/docs/components/faq/index.md)
    - [Testimonial](https://vara.varavel.com/docs/components/testimonial/index.md)
    - [Carousel](https://vara.varavel.com/docs/components/carousel/index.md)
    - [Call to Action](https://vara.varavel.com/docs/components/cta/index.md)
    - [Footer](https://vara.varavel.com/docs/components/footer/index.md)
  - [Troubleshooting](https://vara.varavel.com/docs/troubleshooting/index.md)


## Documentation content

The documentation for the current page follows, reproduced verbatim.


# Header

`<vara-header>` provides the site chrome needed by a landing page: responsive branding, desktop and mobile navigation, theme switching, and one primary action.

## Usage

```html
<vara-header
  title="Acme"
  links="Product|/product,Docs|/docs,Company|/company"
  cta_label="Get started"
  cta_href="/signup"
/>
```

## Preview

<vara-header
title="Acme"
links="Product|/product,Docs|/docs,Company|/company"
cta_label="Get started"
cta_href="/signup"
show_theme="false"
/>

## Props

| Prop          | Type   | Default     | Description                                            |
| ------------- | ------ | ----------- | ------------------------------------------------------ |
| `title`       | string | site title  | Brand title.                                           |
| `logo_light`  | string | site logo   | Logo for light surfaces.                               |
| `logo_dark`   | string | site logo   | Logo for dark surfaces.                                |
| `logo_alt`    | string | title       | Accessible logo text when the visible title is hidden. |
| `home_href`   | string | `"/"`       | Brand-link destination.                                |
| `links`       | string | `""`        | Comma-separated `Label\|href` navigation records.      |
| `cta_label`   | string | `""`        | Primary action label. Requires `cta_href`.             |
| `cta_href`    | string | `""`        | Primary action destination.                            |
| `cta_variant` | string | `"solid"`   | Primary action style.                                  |
| `cta_color`   | string | `"neutral"` | Primary action color.                                  |
| `show_logo`   | string | `"true"`    | Show the brand logo.                                   |
| `show_title`  | string | `"true"`    | Show the visible brand title.                          |
| `show_theme`  | string | `"true"`    | Show the theme picker control.                         |
| `sticky`      | string | `"false"`   | Keep the header at the viewport top.                   |
| `container`   | string | `"lg"`      | One of: xs, sm, md, lg, xl, full.                      |
| `class`       | string | `""`        | Additional header classes.                             |

## Behavior

The mobile navigation closes on Escape and on outside clicks. Long logos and titles shrink safely instead of overflowing.

The theme picker appears by default. Set `show_theme="false"` when you want a quiet header, and `sticky="true"` to keep the header at the top while scrolling.

## Hiding the logo or the title

Sites without a logo can hide it while keeping the title, and logos that already include the title as part of the artwork can hide the title instead:

```html
<vara-header title="Acme" show_logo="false" />
```

```html
<vara-header
  logo_light="/images/logo.svg"
  logo_dark="/images/logo.svg"
  show_title="false"
/>
```

The logo keeps the `logo_alt` text as its accessible name whenever the title is hidden. When both are hidden the header renders without a brand link.

## With a logo

Pass logo URLs for light and dark surfaces. When only one is given, it is used for both:

```html
<vara-header
  title="Acme"
  logo_light="/images/logo-dark.svg"
  logo_dark="/images/logo-light.svg"
  links="Docs|/docs"
/>
```