# Header Base

> Render a full-width landing header with centered navigation.

Canonical HTML: https://press.varavel.com/docs/shortcodes/header-base/
Markdown: https://press.varavel.com/docs/shortcodes/header-base/index.md

`header_base` renders the standard landing header with logo, optional title, desktop navigation, mobile menu, CTA, and theme toggle.

## When to Use

Use it at the top of landing pages that need lightweight navigation. Keep the menu short and reserve the CTA for the page's primary action.

## Usage

```markdown
{{/* header_base(
container="lg",
menu="Docs|/docs,Shortcodes|/docs/shortcodes",
cta_text="Start",
cta_url="/docs",
title="VaraPress"
) */}}
```

## Live Example

{{ header_base(
container="md",
menu="Docs|/docs,Shortcodes|/docs/shortcodes",
cta_text="Start",
cta_url="/docs",
title="VaraPress"
) }}

## Parameters

| Parameter     | Description                                        |
| ------------- | -------------------------------------------------- |
| `container`   | Inner content width for the header.                |
| `logo_light`  | Logo URL used in light mode.                       |
| `logo_dark`   | Logo URL used in dark mode.                        |
| `title`       | Brand text shown next to the logo.                 |
| `show_title`  | Set to `false` to show only the logo.              |
| `menu`        | Comma-separated `label\|url` pairs.                |
| `cta_text`    | Optional header CTA label.                         |
| `cta_url`     | Optional header CTA URL.                           |
| `cta_variant` | CTA style: `solid`, `outline`, or `ghost`.         |
| `cta_color`   | CTA color token.                                   |
| `show_theme`  | Set to `false` to hide the theme toggle.           |
| `sticky`      | Set to `true` to keep the header fixed at the top. |
| `class`       | Additional CSS classes on the header.              |