A responsive header component that includes a logo, call-to-action button, navigation links, icons, and language selector.
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
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. |
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;
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.