73rd Allestree
Component Library
Live previews, props, and usage notes for every shared UI component.
SiteHeader
The persistent four-band page header. Always rendered at the top of every page via NavigationBar.
The SiteHeader rendered above this page is the live component. It has four bands:
- Scout Purple stripe — 10px, Tier 1 national identity
- White nav bar — Scouts logo, group name, navigation links
- Group Red stripe — 20px, Tier 2 group identity
- Dynamic breadcrumb bar — Scout Purple on general pages; section colour on section pages
| Prop | Type | Description |
|---|---|---|
| navItems | NavItemConfig[] | Navigation links with label, href, and optional current flag. |
| breadcrumbs | BreadcrumbItem[] | Breadcrumb trail. Defaults to empty array. |
NavItem
A single navigation link rendered inside the desktop nav list.
| Prop | Type | Description |
|---|---|---|
| item.label | string | Visible link text. |
| item.href | string | Link destination. |
| item.current | boolean? | Marks this link as the active page. Adds aria-current='page' and purple tint styling. |
Breadcrumb
The coloured bar beneath the Group Red stripe. Background colour changes per section.
| Prop | Type | Description |
|---|---|---|
| items | BreadcrumbItem[] | Array of { label, href } trail items. Last item is rendered as plain text with aria-current='page'. |
| backgroundColour | string | Tailwind bg class for the bar. Driven by useSectionTheme() → sectionColour. |
| data-testid | string? | Optional test ID forwarded to the nav element. |
MobileMenu
Full-viewport overlay navigation for small screens. Controlled by SiteHeader — open on hamburger click, close on Escape or the close button.
- → Opens when the hamburger button is tapped (visible below
mdbreakpoint) - → Focus is trapped within the overlay while open
- → Pressing Esc or clicking the close button dismisses the menu
- → Focus returns to the hamburger trigger on close
- →
role="dialog"+aria-modal="true"for screen readers
| Prop | Type | Description |
|---|---|---|
| isOpen | boolean | Controls visibility of the overlay. |
| onClose | () => void | Called when the menu should close. |
| navItems | NavItemConfig[] | Same items as the desktop nav. |
| triggerRef | RefObject<HTMLButtonElement> | Ref to the hamburger button — focus returns here on close. |
SectionProvider + useSectionTheme
React context that broadcasts section and unit theme data down the component tree.
// Wrap a section layout
<SectionProvider section="beavers" unit="mohawks">
<NavigationBar />
<main>{children}</main>
</SectionProvider>
// Consume anywhere in the tree
const {
sectionColour, // 'bg-beavers'
sectionColourHex, // '#004F6E'
unitAccent, // 'bg-beavers-mohawks'
unitAccentHex, // '#0085B2'
sectionName, // 'Beavers'
unitName, // 'Mohawks'
isGroupLevel, // false
} = useSectionTheme()| Prop | Type | Description |
|---|---|---|
| section | SectionSlug | One of: squirrels | beavers | cubs | scouts |
| unit | UnitSlug? | Optional unit within the section. Unlocks unit-level accent and name. |
| children | ReactNode | The subtree that will receive the context. |
SectionPage
Shared section index layout: hero in section colour, unit cards, and a join CTA.
A client component that reads useSectionTheme() for the hero background and CTA button colour, and renders the section's two unit cards from SectionConfig.units.
Visit /beavers, /cubs, /squirrels, or /scouts to see it live.
| Prop | Type | Description |
|---|---|---|
| config | SectionConfig | Section data from getSectionConfig(slug). Provides name, ageRange, unitGroupName, and units array. |
NavDropdown
A desktop nav item that reveals a dropdown panel of child links on hover or click. Used by SiteHeader when a NavItemConfig has a children array.
| Prop | Type | Description |
|---|---|---|
| item.label | string | The button label shown in the nav bar. |
| item.children | NavItemConfig[] | Sub-links rendered in the dropdown panel. |
| item.current | boolean? | Highlights the button. Auto-derived from any child with current={true}. |
UnitPage
Shared unit detail layout: hero in unit accent colour, about section, what-we-do list, and a join CTA in section colour. Reads all data from useSectionTheme() — no props needed.
UnitPage takes no props. It reads unitName, unitAccent, sectionColour, and sectionName from the nearest SectionProvider.
Visit a unit page to see it live:
| Prop | Type | Description |
|---|---|---|
| (none) | — | All data is read from useSectionTheme(). Wrap the page in SectionProvider with both section and unit props. |
HomeHero
Full-bleed photo hero for the group homepage. Background image with a Scout Purple-to-Navy gradient overlay, Group Red accent stripe, heading, strapline, and CTA buttons.
73rd Derby (Allestree)
Scout Group
Woodlands Road, Allestree, Derby, DE22 2HE
Fun and challenging activities, unique experiences, everyday adventure — and the chance to help others. For young people aged 4–14 in Allestree, Derby.
| Prop | Type | Description |
|---|---|---|
| imageSrc | string? | Path to the background photo. Defaults to /images/group-photo.jpg. |
Footer
Site-wide footer in Scout Navy. Group identity, address, charity number, social links, and section quick-links. Rendered in every layout.
| Prop | Type | Description |
|---|---|---|
| facebookHref | string? | Facebook profile URL. Defaults to '#'. |
| twitterHref | string? | X (Twitter) profile URL. Defaults to '#'. |
| instagramHref | string? | Instagram profile URL. Defaults to '#'. |
Brand colour tokens
Tailwind tokens mapped to the three-tier brand hierarchy. Never use raw hex values in components — always reference a token.
Scout Purple
#4D2177
Tier 1 — National
Group Red
#B31C27
Tier 2 — Group
Squirrels
#9B1C1C
Tier 3 — Section
Beavers
#004F6E
Tier 3 — Section
Cubs
#4A5E06
Tier 3 — Section
Scouts
#0F3D0F
Tier 3 — Section