Navigation
The hackclub.com header, with the flag logo, links, dropdown menus and a call to action. Below 1024px it collapses behind a hamburger into a full-screen menu, and dropdowns become inline disclosures. sticky pins it with a frosted background once the page scrolls; invert uses light text over dark heroes. This site's header is a live example: resize the window to see the mobile menu.
<hc-nav>
<a href="#" aria-current="page">Clubs</a>
<a href="#">Hackathons</a>
<hc-nav-menu label="About">
<a href="#">Philosophy</a>
<a href="#">Our team</a>
<a href="#">Jobs</a>
</hc-nav-menu>
<hc-button slot="cta" size="sm" variant="primary">Join community</hc-button>
</hc-nav>API
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
logo-src, logo-alt, logo-href | string | Hack Club flag, "/" | The logo image and link |
label | string | "Main" | Accessible name of the <nav> |
sticky | boolean | Stick to the top with a frosted background once scrolled | |
invert | boolean | Light text until scrolled, for dark heroes | |
open | boolean | Mobile menu state | |
hc-nav-menu label | string | Dropdown trigger text | |
hc-nav-menu align | "start" | "end" | "start" | Align the panel to the trigger's start or end |
Slots
| Name | Description |
|---|---|
(default) | Links and <hc-nav-menu> elements |
logo | Replace the logo |
cta | Call to action |
end | Extra controls, e.g. <hc-theme-toggle> |
Events
| Name | Description |
|---|---|
hc-toggle | The mobile menu opened or closed |
CSS parts
| Name | Description |
|---|---|
bar | |
logo | |
menu | |
toggle | Hamburger button |