Header

The Header Main Navigation provides users with quick access to the primary sections of a website or application. Positioned at the top of the page, it helps users understand the site's structure and easily move between major areas.

Mobile View: To see the mobile header behavior, use your browser's developer tools and switch to mobile view (responsive design mode).

Anonymous State

The anonymous header is designed for users who are not signed in. It typically provides access to general navigation, informational content, and clear calls to action such as Sign In or Register, encouraging users to authenticate and access personalized features.

Breakpoints

desktop

mobile

Guvernul Republicii Moldova

Authenticated State

The authenticated header displays user information and provides access to profile management, identity switching for users with multiple roles (individual and business), and sign-out functionality.

Breakpoints

desktop: single identity

mobile: single identity

User with single identity. Profile button shows avatar and name.

Guvernul Republicii Moldova

desktop: multi-identity with switcher

mobile: multi-identity with switcher

User with multiple identities (individual and business). Profile menu includes identity switcher.

Guvernul Republicii Moldova

States

Desktop

default (with active link: option1)

Guvernul Republicii Moldova

hover

Hover over the logo or navigation items to see hover states.

Guvernul Republicii Moldova

full-menu: active

Click on a navigation dropdown to see the full menu with multiple columns.

Guvernul Republicii Moldova

compact-menu: active

Click on a navigation dropdown to see the compact single-column menu.

Guvernul Republicii Moldova

services: active

Click the grid icon (⋮⋮⋮) to see the platform services dropdown.

Guvernul Republicii Moldova

help: active

Click the help icon (?) to see the help dropdown menu.

Guvernul Republicii Moldova

Variations

compact

Guvernul Republicii Moldova

compact: navigation-none

Header without navigation links, only actions.

Guvernul Republicii Moldova

full header

Full mode with navigation displayed below the main header bar.

Guvernul Republicii Moldova

hide links on search

Navigation links are hidden when search is active instead of moving below.

Guvernul Republicii Moldova

Event Handling

All interactive elements emit events that can be handled in parent components.

razor

<FodHeader
    OnLinkClick="HandleLinkClick"
    OnPlatformClick="HandlePlatformClick"
    OnSearch="HandleSearch"
    OnHelpLinkClick="HandleHelpLinkClick"
    OnLanguageChange="HandleLanguageChange"
    OnAuthClick="HandleAuthClick"
    OnSecondaryClick="HandleSecondaryClick"
    OnProfileClick="HandleProfileClick"
    OnIdentityChange="HandleIdentityChange"
    OnSignOut="HandleSignOut"
    OnMobileMenuOpen="HandleMobileMenuOpen"
    OnMobileMenuClose="HandleMobileMenuClose" />

API Reference

FodHeader component properties and their descriptions.

No properties defined.