Back to snippets
jamsr_ui_sticky_header_with_nav_links_and_buttons.ts
typescriptA basic implementation of a sticky header with a logo, navigation links,
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;