Navbar

{
  "$bloktastic": {
    "version": "1.0.0"
  },
  "name": "navbar",
  "display_name": "Navbar",
  "is_root": false,
  "is_nestable": true,
  "schema": {
    "logo_text": {
      "type": "text",
      "pos": 0,
      "display_name": "Logo Text",
      "description": "Brand text shown in navbar",
      "required": true
    },
    "menu_links": {
      "type": "textarea",
      "pos": 1,
      "display_name": "Menu Links",
      "description": "One per line: Label|/path or Label|https://url",
      "required": true
    },
    "cta_button": {
      "type": "bloks",
      "pos": 2,
      "display_name": "CTA Button",
      "description": "Optional primary button in navbar",
      "restrict_components": true,
      "component_whitelist": [
        "button"
      ],
      "maximum": 1
    },
    "sticky": {
      "type": "boolean",
      "pos": 3,
      "display_name": "Sticky Header",
      "default_value": true,
      "description": "Keep navbar fixed to top on scroll"
    },
    "theme": {
      "type": "option",
      "pos": 4,
      "display_name": "Theme",
      "default_value": "light",
      "options": [
        {
          "name": "Light",
          "value": "light"
        },
        {
          "name": "Dark",
          "value": "dark"
        },
        {
          "name": "Transparent",
          "value": "transparent"
        }
      ],
      "description": "Navbar color mode"
    }
  },
  "preview_field": "logo_text"
}

# Navbar

## Purpose
Responsive navigation header with logo text, menu links, CTA, and mobile-friendly behavior.

## Storyblok Schema Fields
- `logo_text` (text, required): Brand text shown in navbar
- `menu_links` (textarea, required): One per line: Label|/path or Label|https://url
- `cta_button` (bloks): Optional primary button in navbar
- `sticky` (boolean): Keep navbar fixed to top on scroll
- `theme` (option): Navbar color mode

## Visual Requirements
- Design for responsive marketing pages (mobile, tablet, desktop).
- Keep spacing and hierarchy clear for conversion-focused sections.
- Support optional content gracefully without visual gaps.

## Accessibility
- Use semantic sectioning and heading structure.
- Ensure interactive elements are keyboard reachable with visible focus states.
- Maintain WCAG-compliant contrast in all supported styles.

## Example Props Structure
```typescript
interface NavbarProps {
  // Map Storyblok fields to your frontend props here
}
```

## Edge Cases
- Missing optional media or links.
- Extremely long text content.
- Empty collections in nested blok fields.

# @bloktastic/navbar

Responsive navigation header with logo text, menu links, CTA, and mobile-friendly behavior.

## Installation

```bash
bloktastic add @bloktastic/navbar
```

## Fields

| Field | Type | Required | Description |
|---|---|---|---|
| logo_text | text | Yes | Brand text shown in navbar |
| menu_links | textarea | Yes | One per line: Label|/path or Label|https://url |
| cta_button | bloks | No | Optional primary button in navbar |
| sticky | boolean | No | Keep navbar fixed to top on scroll |
| theme | option | No | Navbar color mode |

## Notes
- Category: `navigation`
- Tags: `navbar`, `navigation`, `header`, `menu`