Header

In Review

The GOV.IE header component tells users they’re using a service on GOV.IE and lets them use GOV.IE-wide tools. Also known as the GOV.IE masthead.

Variants

Default

Gaeilge

<header id="GovieHeader" class="gi-header">
    <ul class="gi-header-language-bar">
        <li>
        <a
            data-testid="language-link-desktop-0"
            class="gi-header-language-item"
            href="/"
        >
            Gaeilge
        </a>
        </li>
    </ul>

    <div id="MenuContainer" class="gi-header-menu">
        <a aria-label="Go to the home page" href="/home" class="gi-header-logo-lg">
        <img src="logo-desktop.svg" />
        </a>
        <a aria-label="Go to the home page" href="/home" class="gi-header-logo-sm">
        <img src="logo-mobile.svg" />
        </a>

        <div class="gi-header-title">Application title</div>

        <ul id="links-container-desktop" class="gi-header-nav">
        <li class="gi-flex">
            <a data-testid="nav-link-desktop-0" href="/">
            News
            </a>
        </li>
        <li class="gi-flex">
            <a data-testid="nav-link-desktop-1" href="/">
            Departments
            </a>
        </li>
        <li class="gi-flex">
            <a data-testid="nav-link-desktop-2" href="/">
            Services
            </a>
        </li>
        </ul>
        <div class="gi-header-separator"></div>
        <label for="SearchTrigger" class="gi-header-tool-item">
        <input
            class="gi-block gi-w-0 gi-absolute gi-h-0"
            id="SearchTrigger"
            type="checkbox"
        />
        <span class="">Search</span>
        <div class="search-icon">
            <span
            data-testid="govie-icon"
            role="presentation"
            class="material-symbols-outlined gi-block gi-text-[24px]"
            >
            search
            </span>
        </div>
        <div class="gi-hidden close-icon">
            <span
            data-testid="govie-icon"
            role="presentation"
            class="material-symbols-outlined gi-block gi-text-[24px]"
            >
            close
            </span>
        </div>
        </label>
        <a class="gi-header-tool-item" href="/item1">
        <span class="">Apps</span>

        <span
            data-testid="govie-icon"
            role="presentation"
            class="material-symbols-outlined gi-block gi-text-[24px]"
        >
            apps
        </span>
        </a>
        <label for="MobileMenuTrigger" class="gi-header-tool-item sm:gi-hidden">
        <input
            class="gi-block gi-w-0 gi-absolute gi-h-0"
            id="MobileMenuTrigger"
            data-element="menu-icon"
            type="checkbox"
        />
        <span class="">Menu</span>
        <div data-element="menu-icon">
            <span
            data-testid="govie-icon"
            role="presentation"
            class="material-symbols-outlined gi-block gi-text-[24px]"
            >
            menu
            </span>
        </div>
        </label>
    </div>
    <div
        id="SearchContainer"
        class="gi-flex gi-h-0 gi-bg-gray-50 gi-overflow-hidden gi-px-4 xs:gi-px-8"
    >
        <div class="sm:gi-w-3/6 gi-w-full gi-flex gi-mx-auto gi-flex-col gi-my-8">
        <form action="/search_page">
            <label for="search" class="gi-text-md gi-font-bold gi-mb-4">
            Enter search term
            </label>
            <div class="gi-flex">
            <input
                name="search_query"
                type="text"
                class="gi-px-3 gi-py-1 gi-grow gi-w-full"
                id="search"
            />
            <button class="gi-bg-emerald-800 gi-text-white gi-p-md">
                <span
                data-testid="govie-icon"
                role="presentation"
                class="material-symbols-outlined gi-block gi-text-[24px]"
                >
                search
                </span>
            </button>
            </div>
        </form>
        </div>
    </div>

    <div
        id="HeaderMenuContainer"
        class="gi-z-1000 gi-bg-white gi-absolute gi-h-full gi-w-full xs:gi-w-3/5 gi-translate-x-full gi-top-0 gi-right-0"
    >
        <div class="gi-border-gray-100 gi-border-b-xs gi-border-solid gi-h-20 gi-justify-end gi-items-center gi-flex gi-relative gi-py-3 gi-px-4 sm:gi-px-8 sm:gi-py-4">
        <div class="gi-flex gi-items-center">
            <label
            for="MobileMenuTrigger"
            class="gi-border gi-border-solid gi-border-transparent sm:gi-hidden gi-rounded-sm hover:gi-bg-black hover:gi-bg-opacity-20 gi-p-2 gi-flex gi-items-center gi-gap-md gi-cursor-pointer focus:gi-border focus:gi-border-solid focus:gi-border-yellow-400 focus-within:gi-outline-offset-0 focus-within:gi-outline-none focus-within:gi-border focus-within:gi-border-solid focus-within:gi-border-yellow-400"
            >
            <span class="gi-text-2md gi-font-bold">Close</span>

            <span
                data-testid="govie-icon"
                role="presentation"
                class="material-symbols-outlined gi-block gi-text-[24px]"
            >
                Close
            </span>
            </label>
        </div>
        </div>
        <ul class="gi-bg-white gi-px-4 sm:gi-px-8 gi-h-screen">
        <li>
            <a
            href="/"
            class="hover:gi-underline hover:gi-underline-offset-sm gi-block gi-py-4 gi-border-gray-100 gi-border-b-xs gi-border-solid"
            >
            <span class="gi-font-bold gi-text-sm">News</span>
            </a>
        </li>
        <li>
            <a
            href="/"
            class="hover:gi-underline hover:gi-underline-offset-sm gi-block gi-py-4 gi-border-gray-100 gi-border-b-xs gi-border-solid"
            >
            <span class="gi-font-bold gi-text-sm">Departments</span>
            </a>
        </li>
        <li>
            <a
            href="/"
            class="hover:gi-underline hover:gi-underline-offset-sm gi-block gi-py-4 gi-border-gray-100 gi-border-b-xs gi-border-solid"
            >
            <span class="gi-font-bold gi-text-sm">Services</span>
            </a>
        </li>
        <li>
            <a
            href="/"
            class="hover:gi-underline hover:gi-underline-offset-sm gi-block gi-py-4"
            >
            <span class="gi-text-sm">Gaeilge</span>
            </a>
        </li>
        </ul>
    </div>
    <div class="gi-header-overlay" data-element="overlay-disabled"></div>
    </header>

{{ govieHeader({
    "title":"Application title"
    "languages":[{ "href": "/", "label": "Gaeilge" }]
    "navLinks":[{ "href": "/", "label": "News" },{ "href": "/", "label": "Departments" },{ "href": "/", "label": "Services" }]
    "tools":{
        "search": {
            "label": "Search",
            "action": "/search-page",
        },
        "items": [
            {
                "href": "/item1",
                "label": "Home",
                "icon": "home",
            },
        ],
        "menu": {
            "label": "Menu"
        }
    }
    })
}}

import { Header, HeaderProps, HeaderSearch } from '@govie-ds/react';

const headerProps: HeaderProps = {
    items: [
        {
            label: 'Departments',
            itemType: 'link',
            details: {
                href: '#',
            },
            showItemMode: 'desktop-only',
        },
        {
            label: 'Services',
            itemType: 'link',
            details: {
                href: '#',
            },
            showItemMode: 'desktop-only',
        },
        {
            itemType: 'divider',
            showItemMode: 'desktop-only',
        },
        {
            label: 'Home',
            icon: 'home',
            itemType: 'link',
            details: {
                href: '/item1',
            },
            showItemMode: 'desktop-only',
        },
        {
            label: 'Faq',
            icon: 'info',
            itemType: 'slot',
            details: {
                component: <div>Example drawer</div>,
                slotAppearance: 'drawer',
            },
            showItemMode: 'desktop-only',
        },
        {
            label: 'Search',
            icon: 'search',
            itemType: 'slot',
            details: {
                component: <HeaderSearch />,
                slotAppearance: 'dropdown',
            },
            showItemMode: 'desktop-only',
        },
        {
            label: 'Languages',
            icon: 'mic',
            itemType: 'slot',
            details: {
                component: <div>Example slot</div>
                slotAppearance: 'dropdown',
            },
            showItemMode: 'desktop-only',
        },
    ],
};

<Header
    items={headerProps.items}
    addDefaultMobileMenu
    secondaryLinks={[{href: '#', label: 'English'}, { href: '#', label: 'Gaeilge'}]}
/>

Header with only title

<header id="GovieHeader" class="gi-header">
    <div id="MenuContainer" class="gi-header-menu">
        <a aria-label="Go to the home page" href="/home" class="gi-header-logo-lg">
            <img src="logo-desktop.svg" />
        </a>
        <a aria-label="Go to the home page" href="/home" class="gi-header-logo-sm">
            <img src="logo-mobile.svg" />
        </a>
        <div class="gi-header-title">Application title</div>
    </div>    
</header>

{{ govieHeader({"title": "Application title"}) }}

import { Header } from '@govie-ds/react';

<Header title={'Application title'}/>

Header with links

<header id="GovieHeader" class="gi-header">
    <div id="MenuContainer" class="gi-header-menu">
        <a aria-label="Go to the home page" href="/home" class="gi-header-logo-lg">
        <img src="logo-desktop.svg" />
        </a>
        <a aria-label="Go to the home page" href="/home" class="gi-header-logo-sm">
        <img src="logo-mobile.svg" />
        </a>

        <div class="gi-header-title"></div>

        <ul id="links-container-desktop" class="gi-header-nav">
        <li class="gi-flex">
            <a data-testid="nav-link-desktop-0" href="/">
            News
            </a>
        </li>
        <li class="gi-flex">
            <a data-testid="nav-link-desktop-1" href="/">
            Departments
            </a>
        </li>
        <li class="gi-flex">
            <a data-testid="nav-link-desktop-2" href="/">
            Services
            </a>
        </li>
        </ul>
    </div>
</header>

{{ govieHeader({
    "navLinks": [
        { 
            "href": "/", 
            "label": "News" 
        },
        { 
            "href": "/", 
            "label": "Departments" 
        },
        { 
            "href": "/", 
            "label": "Services"
        }
    ]}) 
}}

import { Header } from '@govie-ds/react';

<Header items={
        [
            {
                label: 'Departments',
                itemType: 'link',
                details: {
                    href: '#',
                },
                showItemMode: 'desktop-only',
            },
            {
                label: 'Services',
                itemType: 'link',
                details: {
                    href: '#',
                },
                showItemMode: 'desktop-only',
            }
        ]
    }
/>

Header with language switch

Gaeilge

<header id="GovieHeader" class="gi-header">
    <ul class="gi-header-language-bar">
        <li>
        <a
            data-testid="language-link-desktop-0"
            class="gi-header-language-item"
            href="/"
        >
            Gaeilge
        </a>
        </li>
    </ul>

    <div id="MenuContainer" class="gi-header-menu">
        <a aria-label="Go to the home page" href="/home" class="gi-header-logo-lg">
        <img src="logo-desktop.svg" />
        </a>
        <a aria-label="Go to the home page" href="/home" class="gi-header-logo-sm">
        <img src="logo-mobile.svg" />
        </a>

        <div class="gi-header-title"></div>
    </div>
</header>

{{ govieHeader({
    "languages": [
        { 
            "href": "/", 
            "label": "Gaeilge" 
        }
    ]}) 
}}

import { Header } from '@govie-ds/react';

<Header secondaryLinks={[
  {
    href: '#',
    label: 'English',
  },
  {
    href: '#',
    label: 'Gaeilge',
  },
]}/>

Header with slots

/* Does not support 'slots' feature */
<header id="GovieHeader" class="gi-header">
    <div id="MenuContainer" class="gi-header-menu">
        <a aria-label="Go to the home page" href="/home" class="gi-header-logo-lg">
        <img src="logo-desktop.svg" />
        </a>
        <a aria-label="Go to the home page" href="/home" class="gi-header-logo-sm">
        <img src="logo-mobile.svg" />
        </a>

        <div class="gi-header-title"></div>
        <label for="SearchTrigger" class="gi-header-tool-item">
            <input
                class="gi-block gi-w-0 gi-absolute gi-h-0"
                id="SearchTrigger"
                type="checkbox"
            />
            <span class="">Search</span>
            <div class="search-icon">
                <span
                data-testid="govie-icon"
                role="presentation"
                class="material-symbols-outlined gi-block gi-text-[24px]"
                >
                search
                </span>
            </div>
            <div class="gi-hidden close-icon">
                <span
                data-testid="govie-icon"
                role="presentation"
                class="material-symbols-outlined gi-block gi-text-[24px]"
                >
                close
                </span>
            </div>
        </label>
        <a class="gi-header-tool-item" href="/item1">
            <span class="">Apps</span>

            <span
                data-testid="govie-icon"
                role="presentation"
                class="material-symbols-outlined gi-block gi-text-[24px]"
            >
                apps
            </span>
        </a>
        <label for="MobileMenuTrigger" class="gi-header-tool-item sm:gi-hidden">
            <input
                class="gi-block gi-w-0 gi-absolute gi-h-0"
                id="MobileMenuTrigger"
                data-element="menu-icon"
                type="checkbox"
            />
            <span class="">Menu</span>
            <div data-element="menu-icon">
                <span
                data-testid="govie-icon"
                role="presentation"
                class="material-symbols-outlined gi-block gi-text-[24px]"
                >
                menu
                </span>
            </div>
        </label>
    </div>
    <div
        id="SearchContainer"
        class="gi-flex gi-h-0 gi-bg-gray-50 gi-overflow-hidden gi-px-4 xs:gi-px-8"
    >
        <div class="sm:gi-w-3/6 gi-w-full gi-flex gi-mx-auto gi-flex-col gi-my-8">
        <form action="/search_page">
            <label for="search" class="gi-text-md gi-font-bold gi-mb-4">
            Enter search term
            </label>
            <div class="gi-flex">
            <input
                name="search_query"
                type="text"
                class="gi-px-3 gi-py-1 gi-grow gi-w-full"
                id="search"
            />
            <button class="gi-bg-emerald-800 gi-text-white gi-p-md">
                <span
                data-testid="govie-icon"
                role="presentation"
                class="material-symbols-outlined gi-block gi-text-[24px]"
                >
                search
                </span>
            </button>
            </div>
        </form>
        </div>
    </div>

    <div
        id="HeaderMenuContainer"
        class="gi-z-1000 gi-bg-white gi-absolute gi-h-full gi-w-full xs:gi-w-3/5 gi-translate-x-full gi-top-0 gi-right-0"
    >
        <div class="gi-border-gray-100 gi-border-b-xs gi-border-solid gi-h-20 gi-justify-end gi-items-center gi-flex gi-relative gi-py-3 gi-px-4 sm:gi-px-8 sm:gi-py-4">
        <div class="gi-flex gi-items-center">
            <label
            for="MobileMenuTrigger`"
            class="gi-border gi-border-solid gi-border-transparent sm:gi-hidden gi-rounded-sm hover:gi-bg-black hover:gi-bg-opacity-20 gi-p-2 gi-flex gi-items-center gi-gap-md gi-cursor-pointer"
            >
            <span class="gi-text-2md gi-font-bold">Close</span>

            <span
                data-testid="govie-icon"
                role="presentation"
                class="material-symbols-outlined gi-block gi-text-[24px]"
            >
                Close
            </span>
            </label>
        </div>
        </div>
        <ul class="gi-bg-white gi-px-4 sm:gi-px-8 gi-h-screen">
        <li>
            <a
            href="/"
            class="hover:gi-underline hover:gi-underline-offset-sm gi-block gi-py-4 gi-border-gray-100 gi-border-b-xs gi-border-solid"
            >
            <span class="gi-font-bold gi-text-sm">News</span>
            </a>
        </li>
        <li>
            <a
            href="/"
            class="hover:gi-underline hover:gi-underline-offset-sm gi-block gi-py-4 gi-border-gray-100 gi-border-b-xs gi-border-solid"
            >
            <span class="gi-font-bold gi-text-sm">Departments</span>
            </a>
        </li>
        <li>
            <a
            href="/"
            class="hover:gi-underline hover:gi-underline-offset-sm gi-block gi-py-4 gi-border-gray-100 gi-border-b-xs gi-border-solid"
            >
            <span class="gi-font-bold gi-text-sm">Services</span>
            </a>
        </li>
        <li>
            <a
            href="/"
            class="hover:gi-underline hover:gi-underline-offset-sm gi-block gi-py-4"
            >
            <span class="gi-text-sm">Gaeilge</span>
            </a>
        </li>
        </ul>
    </div>
    <div class="gi-header-overlay" data-element="overlay-disabled"></div>
    </header>

{{ govieHeader(
    tools:{
        search: {
            label: 'Search'
            action: '/search-page',
        },
        items: [
            {
                href: '/item1',
                label: 'Home',
                icon: 'home',
            },
            {
                href: '#',
                label: 'Faq',
                icon: 'info',
                keepOnMobile: true,
                slot:  "<ul class='gi-list-bullet'><li><a href='#' class='gi-link gi-link-sm'>Citizens Information - Services and Rights</a></li><li><a href='#' class='gi-link gi-link-sm'>Revenue - Taxes and Payments</a></li><li><a href='#' class='gi-link gi-link-sm'>Department of Social Protection</a></li></ul>",
            },
        ],
        menu: {
            label: 'Menu'
        }
    }) 
}}

import { Header, HeaderSearch } from '@govie-ds/react';

<Header
    addDefaultMobileMenu
    items={[
          {
            label: 'Search',
            icon: 'search',
            itemType: 'slot',
            details: {
                component: <HeaderSearch />,
                slotAppearance: 'dropdown',
            },
        },
       {
            icon: 'home',
            itemType: 'link',
            details: {
                href: '#',
            },
        },
        {
            label: 'Faq',
            icon: 'info',
            itemType: 'slot',
            details: {
            component: (
                <List
                    type={'bullet'}
                    items={[
                        <Link
                            size="sm"
                            href="#"
                            children="Citizens Information - Services and Rights"
                        />,
                        <Link
                            size="sm"
                            href="#"
                            children="Revenue - Taxes and Payments"
                        />,
                        <Link
                            size="sm"
                            href="#"
                            children="Department of Social Protection"
                        />,
                    ]}
                />
            )
        }
    ]} />

Usage

Best Practices

When to use this component

You must use the GOV.IE header component at the top of every page. The Service Manual explains why it’s important for you to make your service look like GOV.IE.

Additionally, the header now includes a "slots" feature, allowing you to render specific components below the header. This is useful for adding custom elements like navigation aids, search boxes, or additional contextual information that complements the header's main functionality.

When not to use this component

If your service is not hosted on one of the GOV.IE domains outlined, you must not use the GOV.IE header component as it’s not considered part of GOV.IE. You can still build from this component, but you’ll need to make some changes to make sure users do not confuse your website with GOV.IE.

The slots feature lets you add unique, context-specific content directly below the header to support user navigation and service-specific functionality. Examples include displaying language selectors, search input fields, or quick links for frequently accessed features.

How it works

The GOV.IE header component ensure users get a consistent experience on GOV.IE.

This also assures users that they’re in the right place to use your service and to understand that GOV.IE functions as one website.

For guidance on how to plan your header and navigation, see the Help users navigate a service pattern.

The slots can be used to augment this pattern by including additional, user-friendly navigation to your service's needs.

Status

Figma Library	Beta
Global HTML	Beta
Global React	Beta