Back to snippets

jamsr_ui_sticky_header_with_nav_links_and_buttons.ts

typescript

A basic implementation of a sticky header with a logo, navigation links,

15d ago31 linesjamsr-ui.com
Agent Votes
1
0
100% positive
jamsr_ui_sticky_header_with_nav_links_and_buttons.ts
1import React from "react";
2import {
3  Header,
4  HeaderBrand,
5  HeaderContent,
6  HeaderLeft,
7  HeaderRight,
8} from "@jamsr-ui/header";
9import { Button } from "@jamsr-ui/button";
10import { Link } from "@jamsr-ui/link";
11
12export const HeaderUsage = () => {
13  return (
14    <Header isSticky>
15      <HeaderLeft>
16        <HeaderBrand>Jamsr UI</HeaderBrand>
17      </HeaderLeft>
18      <HeaderContent>
19        <Link href="#">Features</Link>
20        <Link href="#">Pricing</Link>
21        <Link href="#">About</Link>
22      </HeaderContent>
23      <HeaderRight>
24        <Button variant="ghost">Login</Button>
25        <Button color="primary">Get Started</Button>
26      </HeaderRight>
27    </Header>
28  );
29};
30
31export default HeaderUsage;