Import
import { UniversalHeaderModule } from '@backbase/ui-ang/universal-header'
Usage
Use the bb-universal-header-ui component to display a universal header. The component supports configurable logo, title, and close button options.
<!-- Basic universal header usage -->
<bb-universal-header-ui
[title]="{ text: 'Custom title' }"
[closeButton]="{ text: 'Save & Exit', icon: 'arrow-back', ariaLabel: 'Save & Exit' }">
</bb-universal-header-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
backgroundColor |
'white' | 'no-background' |
'white' |
|
closeButton |
UniversalHeaderCloseButton |
undefined |
|
logo |
UniversalHeaderLogo |
{} |
|
title |
UniversalHeaderTitle |
undefined |
backgroundColor
The backgroundColor input sets the background color of the universal header.
<!-- Header with no background -->
<bb-universal-header-ui backgroundColor="no-background">
</bb-universal-header-ui>
closeButton
The closeButton input configures the close button with optional text, icon, and aria label.
<!-- Header with close button -->
<bb-universal-header-ui
[closeButton]="{ text: 'Close', icon: 'clear', ariaLabel: 'Close header' }">
</bb-universal-header-ui>
logo
The universal header logo configuration. Specifies the logo display and responsive behavior. When type is not provided, the component automatically renders a full logo on larger screens and an emblem logo on small/extra-small screens.
<!-- Header with specific logo type -->
<bb-universal-header-ui
[logo]="{ type: 'emblem' }">
</bb-universal-header-ui>
title
The title input configures the title text and responsive behavior for small screens.
<!-- Header with title that hides on small screens -->
<bb-universal-header-ui
[title]="{ text: 'Application Title', hideForSmallScreen: true }">
</bb-universal-header-ui>
Outputs
|
Output |
Type |
Description |
|---|---|---|
|
close |
EventEmitter<any> |
Emits when the close button is clicked |
Additional action slot
The universal header supports additional action buttons or custom content through content projection.
<!-- Header with additional action content -->
<bb-universal-header-ui [title]="{ text: 'Title' }">
<button bbButton color="link-text" buttonSize="md">
<bb-icon-ui
cropped
color="link-text"
size="md"
name="ellipsis-h"
aria-label="Menu">
</bb-icon-ui>
</button>
</bb-universal-header-ui>
Logo configuration
The logo can be configured with different types and adaptive behavior for responsive design.
<!-- Automatic logo type adjustment by screen size -->
<bb-universal-header-ui
[logo]="{ type: 'full' }">
</bb-universal-header-ui>
When no logo type is specified, the component automatically shows:
- Full logo on medium screens and larger bb-d-none bb-d-md-block)
- Emblem logo on small screens bb-d-md-none)
Close button configuration
The close button supports various configurations with icons and text.
<!-- Close button with icon only -->
<bb-universal-header-ui
[closeButton]="{ icon: 'clear', ariaLabel: 'Close' }"
(close)="onClose()">
</bb-universal-header-ui>
<!-- Close button with text and icon -->
<bb-universal-header-ui
[closeButton]="{ text: 'Save & Exit', icon: 'arrow-back', ariaLabel: 'Save and exit' }"
(close)="onSaveAndExit()">
</bb-universal-header-ui>
Event handling
Handle close events by listening to the close output.
// Component TypeScript
export class MyComponent {
onHeaderClose() {
console.log('Header close button clicked');
// Handle close action
}
}
<!-- Template with event handling -->
<bb-universal-header-ui
[closeButton]="{ text: 'Close', icon: 'clear' }"
(close)="onHeaderClose()">
</bb-universal-header-ui>
Responsive behavior
The universal header automatically adapts to different screen sizes:
- Logo switches between full and emblem versions if type is not specified. enableAdaptiveLogoType is deprecated and no longer used.
- Title can be hidden on small screens using the hideForSmallScreen option
- Close button icon color adapts based on whether text is present
CSS classes
The following CSS classes are automatically applied by the component:
|
Class |
Description |
|---|---|
|
bb-universal-header |
Main header container |
|
bb-universal-header__actions-content |
Container for actions |
|
bb-universal-header__additional-action |
Container for projected content |
|
bb-universal-header__close-action |
Close button container |
|
bb-universal-header__logo |
Logo container |
|
bb-universal-header__logo--has-adaptive-logo |
Applied when logo uses adaptive behavior |
|
bb-universal-header--no-background |
Applied when backgroundColor is 'no-background' |
|
bb-universal-header__static-content |
Container for logo and title |
|
bb-universal-header__title |
Title container |
|
bb-universal-header__title--hidden-for-small-screen |
Applied when title should hide on small screens |
|
bb-universal-header--white |
Applied when backgroundColor is 'white' |
Types
type UniversalHeaderBackgroundColor = 'white' | 'no-background';
interface UniversalHeaderCloseButton {
text?: string;
icon?: string;
ariaLabel?: string;
}
interface UniversalHeaderTitle {
text?: string;
hideForSmallScreen?: boolean;
}
interface UniversalHeaderLogo {
type?: LogoType;
enableAdaptiveLogoType?: boolean;
}