The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Create a reusable React header by exporting a capitalized Header function, using semantic <header> and <nav> elements, and passing the site name and links in as props. Render that component from a parent, then add CSS with className. A basic header needs no third-party library.
1. Create and export the Header component
Create a file such as Header.jsx and define Header as a capitalized function that returns JSX. Capitalization tells React that <Header /> is a component rather than a built-in HTML element. Export it so another file can import and render it.
export default function Header({ siteName, links }) {
return (
<header className="site-header">
<a className="site-header__brand" href="/">{siteName}</a>
<nav aria-label="Main">
<ul>
{links.map((link) => (
<li key={link.href}>
<a href={link.href}>{link.label}</a>
</li>
))}
</ul>
</nav>
</header>
);
}The component is kept at the top level of its file rather than being defined inside another component. This makes it reusable and easier to import wherever the site header is needed.
2. Pass the site name and links from a parent
Props let a parent supply content to a child component. Here, the parent owns the site name and navigation data; Header receives those values and renders them. Keeping the links in an array avoids hard-coding repeated markup into the header.
#1 Best Overall
import Header from "./Header";
const links = [
{ href: "/about", label: "About" },
{ href: "/articles", label: "Articles" },
{ href: "/contact", label: "Contact" },
];
export default function App() {
return (
<>
<Header siteName="Example Site" links={links} />
<main>
<h1>Welcome</h1>
</main>
</>
);
}Each link object has an href and a visible label. The key on each list item gives React a stable identifier when it renders the array; using the destination works for this simple example as long as destinations are unique. If your application uses a router, use its link component for internal routes when appropriate instead of a plain anchor.
3. Use semantic header and navigation markup
Use the HTML <header> for the site-wide banner and <nav> for a group of navigation links. A page-level <header> outside subsection content exposes the banner landmark; a <nav> exposes the navigation landmark. Neither needs a duplicate ARIA role.
The aria-label="Main" gives this navigation region a useful name. If a page has more than one navigation region—for example, a main menu and footer navigation—label each by purpose, such as aria-label="Main" and aria-label="Footer". Identical repeated navigation can share a label. Avoid adding extra landmarks that do not help users distinguish page regions.
4. Add CSS using className
In JSX, use className rather than the HTML attribute class. The example supplies separate CSS hooks for the overall header and brand link. Add styles in the stylesheet location your project already uses; React does not prescribe how CSS files must be loaded.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11.site-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.site-header__brand {
font-weight: 700;
text-decoration: none;
}
.site-header ul {
display: flex;
gap: 1rem;
list-style: none;
margin: 0;
padding: 0;
}These styles provide a starting layout, not a required React convention. Adjust spacing, colors, and responsive behavior to match the rest of the site.
5. Check keyboard and screen-reader usability
Navigation links should be native anchors with meaningful visible labels. Native links are keyboard-operable by default, so a static header generally does not need custom keyboard handlers or tabIndex. Keep the header’s structure simple and ensure any CSS does not hide focus indication.
A static row of links does not require menu JavaScript. If you later add a collapsible mobile menu, implement it as an interactive control with a clear accessible name and state, and ensure opening and closing it does not leave keyboard focus in a confusing location.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Why this structure works
React describes components as reusable UI elements that combine markup, CSS, and JavaScript. A header component follows that model: the parent provides changing content through props, while the component owns the shared structure. For a basic site header, this small pattern is enough; consider a component library only if the wider application needs its additional interface components and conventions.
Quick Recap
Best Value
References: React: Learn; React: Your First Component; React: Passing Props to a Component; React DOM Components; MDN: ARIA banner role; MDN: ARIA navigation role.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
