# @bolttech/atoms-header

> A responsive header component that includes a logo, call-to-action button, navigation links, icons, and language selector.

Latest version **0.21.3** (published 2026-06-08) · 0 weekly downloads

## Install

```sh
npm install @bolttech/atoms-header
pnpm add @bolttech/atoms-header
yarn add @bolttech/atoms-header
bun add @bolttech/atoms-header
```

## Health

**Score 50/100 (C)** — status: active.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.21.3 |
| Published | 2026-06-08 |
| First published | 2023-04-06 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 191.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | andsfranbolt, danielkhalebbatista, pauloazevedo-ed, bruno.gomes, plinio.altoe, joaoteixeira20, esteve-cabrera, jabolttech, lucasvpaiva, herberts.fortuna, matheus.maciel.bolttech, silas.silva.bolttech |

## Links

- npm: https://www.npmjs.com/package/@bolttech/atoms-header
- npm.io page: https://npm.io/package/@bolttech/atoms-header

## Dependencies (7)

- [react](https://npm.io/package/react.md) 19.1.2
- [styled-components](https://npm.io/package/styled-components.md) 6.1.1
- [@bolttech/ui-utils](https://npm.io/package/@bolttech/ui-utils.md) 0.6.7
- [@bolttech/atoms-icon](https://npm.io/package/@bolttech/atoms-icon.md) 0.24.9
- [@bolttech/atoms-button](https://npm.io/package/@bolttech/atoms-button.md) 0.29.6
- [@bolttech/default-theme](https://npm.io/package/@bolttech/default-theme.md) 0.18.2
- [@bolttech/frontend-foundations](https://npm.io/package/@bolttech/frontend-foundations.md) 0.12.3

## Recent versions

- 0.21.3 (latest) — 2026-06-08
- 0.21.2 — 2026-05-29
- 0.21.0 — 2026-04-08
- 0.19.3 — 2026-03-05
- 0.19.2 — 2024-09-27
- 0.19.1 — 2024-09-10
- 0.19.0 — 2024-09-04
- 0.18.0 — 2024-09-02
- 0.17.1 — 2024-07-04
- 0.17.0 — 2024-06-17
- 0.16.2 — 2024-04-08
- 0.16.1 — 2024-01-16
- 0.16.0 — 2023-11-21
- 0.15.1 — 2023-11-07
- 0.15.0 — 2023-11-06
- … 37 more at https://npm.io/package/@bolttech/atoms-header/versions

## README

# Header Component

A responsive header component that includes a logo, call-to-action button, navigation links, icons, and language selector.

## Installation

Use the package manager [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) to install the component and its dependencies.

```bash
npm install @bolttech/frontend-foundations @bolttech/atoms-header
```

or

```bash
yarn add @bolttech/frontend-foundations @bolttech/atoms-header
```

## Props

The `Header` component accepts the following properties:

| Prop       | Type     | Description                                                                               |
| ---------- | -------- | ----------------------------------------------------------------------------------------- |
| id         | `string` | The `id` attribute of the header component.                                               |
| dataTestId | `string` | The `data-testid` attribute for testing.                                                  |
| logo       | `object` | Object containing the information of the logo.                                            |
| cta        | `object` | An object containing `variant`, `label`, and `onClick` properties for the CTA button.     |
| links      | `array`  | An array of objects containing `href`, `label`, and `selected` properties for links.      |
| icons      | `array`  | An array of objects containing `href` and `icon` properties for icons.                    |
| languages  | `array`  | An array of objects containing `href` and `label` properties for language selector links. |

## Usage

```jsx
import React from 'react';
import { Header } from '@bolttech/atoms-header';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';

const ExampleComponent = () => {
  const ctaButton = {
    variant: 'primary',
    label: 'Get Started',
    onClick: () => console.log('Button Clicked'),
  };

  const navLinks = [
    { href: '/home', label: 'Home', selected: true },
    { href: '/about', label: 'About', selected: false },
    { href: '/contact', label: 'Contact', selected: false },
  ];

  const socialIcons = [
    { href: 'https://twitter.com', icon: 'https://example.com/twitter.png' },
    { href: 'https://facebook.com', icon: 'https://example.com/facebook.png' },
  ];

  const languages = [
    { href: '/en', label: 'EN' },
    { href: '/fr', label: 'FR' },
  ];

  const logo = { image: 'https://example.com/logo.png', href: '/' };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Header id="header" dataTestId="custom-header" logo={logo} cta={ctaButton} links={navLinks} icons={socialIcons} languages={languages} />
    </BolttechThemeProvider>
  );
};

export default ExampleComponent;
```

## Contributing

Contributions are welcome! For any bug fixes, improvements, or new features, please open an [issue](link-to-issues) or submit a pull request.

Please make sure to follow the code standards and test your changes before submitting.

---
_Source: https://npm.io/package/@bolttech/atoms-header · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._