PageWithHeader#
Import#
import { PageWithHeader } from 'bumbag';
Usage#
The <PageWithHeader>
component enables you to build a page layout with a header.
Provide your header component to the header
prop, and the rest of your page as children.
Sticky headers#
To make your header sticky, add the sticky
prop.
<PageWithHeaderstickyheader={<TopNav><TopNav.Section><TopNav.Item href="https://bumbag.style" fontWeight="semibold"><Image src="/logo.png" height="44px" /></TopNav.Item><TopNav.Item href="#">Get started</TopNav.Item><TopNav.Item href="#">Components</TopNav.Item></TopNav.Section><TopNav.Section marginRight="major-2"><TopNav.Item><Button variant="ghost" palette="primary">Sign up</Button></TopNav.Item><TopNav.Item><Button palette="primary">Login</Button></TopNav.Item></TopNav.Section></TopNav>}border="default"overrides={{ PageWithHeader: { styles: { base: { minHeight: 'unset' } } } }}><Box padding="major-2">Hello world</Box></PageWithHeader>
Toggling the header#
You can toggle the header with your own component using the <PageWithHeader.Disclosure>
component.
Or you can use the usePage
hook.
Header height#
You can alter the height of the header with the headerHeight
prop.
Props#
PageWithHeader Props#
defaultIsVisible
boolean
Indicates if the header is visible initially.
header
Required
ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>
Sets the header component.
headerHeight
string
Sets the height of the header component.
sticky
boolean
Makes the header stick to the top of the page.
Inherits Box
props
use
string | (ComponentClass<any, any> & { useProps: any; }) | (FunctionComponent<any> & { useProps: any; })
className
string
children
string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal | ((props: BoxProps) => ReactNode)
alignX
"right" | "left" | "center"
alignY
"top" | "bottom" | "center"
variant
string
colorMode
string
disabled
boolean
overrides
{ useCSSVariables?: boolean; altitudes?: AltitudesThemeConfig; borders?: BordersThemeConfig; borderRadii?: BorderRadiiThemeConfig; ... 95 more ...; Template?: TemplateThemeConfig; }
elementRef
((instance: any) => void) | RefObject<any>
themeKey
string
PageWithHeader.Disclosure Props#
Inherits Box
props
use
string | (ComponentClass<any, any> & { useProps: any; }) | (FunctionComponent<any> & { useProps: any; })
className
string
children
string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal | ((props: BoxProps) => ReactNode)
alignX
"right" | "left" | "center"
alignY
"top" | "bottom" | "center"
variant
string
colorMode
string
disabled
boolean
overrides
{ useCSSVariables?: boolean; altitudes?: AltitudesThemeConfig; borders?: BordersThemeConfig; borderRadii?: BorderRadiiThemeConfig; ... 95 more ...; Template?: TemplateThemeConfig; }
elementRef
((instance: any) => void) | RefObject<any>
themeKey
string