Skip to main content
Design System
In Review

Header

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
Application title
Homehome

Search the website

<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 } from '@govie-ds/react';

<Header
    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'
        }
    }
/>

Header with only title

Application 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 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 navLinks={[
            { href: '/', label: 'News' },
            { href: '/', label: 'Departments' },
            { href: '/', label: 'Services' }
        ]}/>

      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 languages={[{ href: '/', label: 'Gaeilge' }]}/>

        Header with tools

          Homehome

          Search the website

          /* 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 } from '@govie-ds/react';

<Header tools={{
    search: {
        label: 'Search'
        action: '/search-page',
    },
    items: [
        {
            href: '/item1',
            label: 'Home',
            icon: 'home',
        },
        {
            href: '#',
            label: 'Faq',
            icon: 'info',
            keepOnMobile: true,
            slot: (
                <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"
                    />,
                ]}
                />
            ),
    },
    ],
    menu: {
        label: 'Menu'
    }
}} />

          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
          Considering
          Local HTML
          Stable
          Global HTML
          Beta
          Global React
          Beta