HeaderPanel
Examples
Check out the Usage section for details about how to design a HeaderPanel properly, and the different configuration options we provide.
Basic example
The HeaderPanel component is a wrapper that will designate which components make up the page header.
<HeaderPanel>
<h1>Sample heading text</h1>
</HeaderPanel>
Usage
Overview
The header spans the full width of the viewport and is the topmost element in the browser window. It remains persistent throughout the product experience, ensuring consistency in navigation. As a flexible composite component, the header can include various elements depending on the use case. Currently, as a starting point, we use the header pattern to maintain alignment and consistency across products.
When to use
The global header is a mandatory element in every application, ensuring consistent navigation and a unified user experience across products.
Anatomy
The header typically consists of the following elements:
- Product name/Logo: Represents the brand or application.
- Search bar: Enables users to quickly find content.
- Global actions: May include help, notifications, settings, and user profile.
Not all elements are required. Only what is necessary for your specific use case. The header is an open and flexible component that can accommodate various elements based on specific use cases. Teams can customize it by adding different components, tools, and functionalities as needed while maintaining a streamlined experience.
Best practices
- The global header must always include a product name. The product name in both the header and the navigation pane must be identical and in title case.
- The Guidewire "G" logo type functions as a button. Clicking it will redirect users to the Home landing page.
Responsiveness
- The global header is optimized for standard desktop and tablet displays.
- On tablets, the Guidewire G logo type and product name are centered, and the context text string is hidden. Users need to click the settings icon to view the context information in a panel.
Related elements
Code
<HeaderPanel>
<h1>Sample heading text</h1>
</HeaderPanel>
Import statement
import { HeaderPanel } from '@jutro/components';
Component contract
Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.
Properties
childrenrequired- Type
nodeDescriptionContent of the HeaderPanel.
className- Type
stringDescriptionCSS class name for this component.
position- Type
'relative'| 'fixed' | 'sticky'DescriptionPosition of the HeaderPanel. If 'relative', then it will render based on where the component is positioned in the page code. If 'fixed', it will always render at top of the page. If 'sticky', it will render based on where the component is positioned in the page code, but when your view passes under the header it will remain at the top of the window.
Default value'relative'
Hooks
No hooks are available for HeaderPanel.
Translation keys
There are no translations for HeaderPanel.
For information on how to manage translations, see our section about Internationalization.
Escape hatches
For more information, see our documentation about escape hatches.