The WhitepaperNav component renders a fixed navigation element with the 228 logo icon. It's designed for whitepaper-style pages and provides a subtle, always-visible way to navigate back to the homepage or a custom URL.
This is an internal (Coral Reef) component used across 228 deployments.
The component renders a fixed-position logo in the top-left corner with a frosted glass effect background.
The WhitepaperNav is rendered fixed to the viewport. See the logo icon in the top-left corner of this page.
import { WhitepaperNav } from "@228-co/reef/components";
<WhitepaperNav />You can specify a custom URL for the logo link using the href prop.
Links to a custom URL instead of the default homepage.
<WhitepaperNav href="/dashboard" />
| Name | Type | Default | Description |
|---|---|---|---|
href | string | "/" | The URL to navigate to when the logo is clicked. Defaults to the homepage. |
The component uses the following styling features:
position: fixed - Stays in the top-left corner regardless of scroll position
backdrop-filter: blur(3px) - Creates a frosted glass effect behind the logo
z-index: 100 - Ensures the nav stays above other content
color-mix - Uses semi-transparent primary color for the background
This component requires the Icon component with a "logo" icon registered in the IconProvider. Make sure your application has the logo icon available.
// The component internally uses:
<Icon icon="logo" style={styles.logo} />WhitepaperNav uses theme variables for consistent styling across themes:
themeSizing.spaceS - Used for positioning and padding
themeColors.primary0 - Used for the semi-transparent background color