@bolttech/atoms-header v0.16.2
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 or yarn to install the component and its dependencies.
npm install @bolttech/frontend-foundations @bolttech/atoms-header
or
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
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 or submit a pull request.
Please make sure to follow the code standards and test your changes before submitting.
29 days ago
4 months ago
9 months ago
9 months ago
8 months ago
7 months ago
8 months ago
6 months ago
6 months ago
6 months ago
8 months ago
8 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago