Cookies on MoJ Design System

We’d like to use analytics cookies so we can understand how you use the service and make improvements.

Skip to main content

Components Identity bar

Open this example (Identity bar (example)) in a new window 
<div class="moj-identity-bar">
  <div class="moj-identity-bar__container">
    <div class="moj-identity-bar__details">

      <span class="moj-identity-bar__title"><b>Jane Wolenksy</b> and <b>Simon Wolensky</b></span>

    </div>

  </div>
</div>


{%- from "moj/components/identity-bar/macro.njk" import mojIdentityBar -%}

{{ mojIdentityBar({
  title: {
    html: "<b>Jane Wolenksy</b> and <b>Simon Wolensky</b>"
  }
}) }}

This component is in the ‘Assets’ tab in the MoJ Figma Kit.

If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.

View component in MoJ Figma Kit

Overview

When to use

Use the identity bar component to give users context of where they are within a service such as viewing a case.

This component is helpful when an entity consists of additional sub sections.

When not to use

Don't use this component if there's only one details page. For example, clicking a case in a case list and seeing a single page of information about the case.

Similar or linked components

There's also the:

How to use

Displaying tasks

You can use buttons to display tasks which relate to the identity bar.

Open this example (Identity bar with menu (example)) in a new window 
<div class="moj-identity-bar">
  <div class="moj-identity-bar__container">
    <div class="moj-identity-bar__details">

      <span class="moj-identity-bar__title"><b>Jane Wolenksy</b> and <b>Simon Wolensky</b></span>

    </div>

    <div class="moj-identity-bar__actions">

      <div class="moj-identity-bar__menu">

        <div class="moj-button-menu" data-module="moj-button-menu">

          <a href="#" role="button" draggable="false" class="govuk-button moj-button-menu__item govuk-button--secondary" data-module="govuk-button">
            Primary action
          </a>

        </div>

      </div>

      <div class="moj-identity-bar__menu">

        <div class="moj-button-menu" data-module="moj-button-menu" data-button-classes="govuk-button--secondary">

          <a href="#" role="button" draggable="false" class="govuk-button moj-button-menu__item govuk-button--secondary" data-module="govuk-button">
            Secondary action
          </a>

        </div>

      </div>

    </div>

  </div>
</div>


{%- from "moj/components/identity-bar/macro.njk" import mojIdentityBar -%}
{{ mojIdentityBar({
    "title": {
        "html": "<b>Jane Wolenksy</b> and <b>Simon Wolensky</b>"
    },
    "menus": [
        {
            "items": [
                {
                    "text": "Primary action",
                    "href": "#"
                }
            ]
        },
        {
            "button": {
                "classes": "govuk-button--secondary"
            },
            "items": [
                {
                    "text": "Secondary action",
                    "href": "#"
                }
            ]
        }
    ]
}) }}

This component is in the ‘Assets’ tab in the MoJ Figma Kit.

If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.

View component in MoJ Figma Kit

Displaying a menu of tasks

You can use the button menu to display tasks which relate to the identity bar.

Open this example (Identity bar with toggleable menu (example)) in a new window 
<div class="moj-identity-bar">
  <div class="moj-identity-bar__container">
    <div class="moj-identity-bar__details">

      <span class="moj-identity-bar__title"><b>Jane Wolenksy</b> and <b>Simon Wolensky</b></span>

    </div>

    <div class="moj-identity-bar__actions">

      <div class="moj-identity-bar__menu">

        <div class="moj-button-menu" data-module="moj-button-menu" data-align-menu="right">

          <a href="#" role="button" draggable="false" class="govuk-button moj-button-menu__item govuk-button--secondary" data-module="govuk-button">
            Primary action
          </a>

          <a href="#" role="button" draggable="false" class="govuk-button moj-button-menu__item govuk-button--secondary" data-module="govuk-button">
            Secondary action
          </a>

          <a href="#" role="button" draggable="false" class="govuk-button moj-button-menu__item govuk-button--secondary" data-module="govuk-button">
            Tertiary action
          </a>

        </div>

      </div>

    </div>

  </div>
</div>


{%- from "moj/components/identity-bar/macro.njk" import mojIdentityBar -%}

{{ mojIdentityBar({
  title: {
    html: '<b>Jane Wolenksy</b> and <b>Simon Wolensky</b>'
  },
  menus: [{
    alignMenu: "right",
    items: [{
      text: 'Primary action',
      href: "#"
    }, {
      text: 'Secondary action',
      href: "#"
    }, {
      text: 'Tertiary action',
      href: "#"
    }]
  }]
}) }}

This component is in the ‘Assets’ tab in the MoJ Figma Kit.

If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.

View component in MoJ Figma Kit

Displaying primary and secondary tasks

You can use the button menu alongside a GOV.UK button (or link) to show tasks of differing importance which relate to the identity bar. This code has correct spacing and creates a better user experience for people on mobile devices.

Open this example (Identity bar with toggleable secondary menu (example)) in a new window 
<div class="moj-identity-bar">
  <div class="moj-identity-bar__container">
    <div class="moj-identity-bar__details">

      <span class="moj-identity-bar__title"><b>Jane Wolenksy</b> and <b>Simon Wolensky</b></span>

    </div>

    <div class="moj-identity-bar__actions">

      <div class="moj-identity-bar__menu">

        <div class="moj-button-menu" data-module="moj-button-menu">

          <button type="submit" class="govuk-button moj-button-menu__item govuk-button--secondary" data-module="govuk-button">
            Primary action
          </button>

        </div>

      </div>

      <div class="moj-identity-bar__menu">

        <div class="moj-button-menu" data-module="moj-button-menu" data-button-classes="govuk-button--secondary" data-align-menu="right">

          <a href="#" role="button" draggable="false" class="govuk-button moj-button-menu__item govuk-button--secondary" data-module="govuk-button">
            Secondary action
          </a>

          <a href="#" role="button" draggable="false" class="govuk-button moj-button-menu__item govuk-button--secondary" data-module="govuk-button">
            Tertiary action
          </a>

        </div>

      </div>

    </div>

  </div>
</div>


{%- from "moj/components/identity-bar/macro.njk" import mojIdentityBar -%}

{{ mojIdentityBar({
  title: {
    html: '<b>Jane Wolenksy</b> and <b>Simon Wolensky</b>'
  },
  menus: [{

    items: [{
      text: 'Primary action'
    }]
  }, {
   button: {
    classes: "govuk-button--secondary"
   },
    alignMenu: "right",
    items: [{
      text: 'Secondary action',
      href: "#"
    }, {
      text: 'Tertiary action',
      href: "#"
    }]
  }]
}) }}

This component is in the ‘Assets’ tab in the MoJ Figma Kit.

If you’re external to MoJ, download the Kit and add it as a library to your Figma files. You’ll need to re-add the kit to update the version.

View component in MoJ Figma Kit

Get help and contribute

Get help

You can contact the MoJ Design System team for help or support using this component.

Help improve this component

The MoJ Design System team would like to hear:

  • how you have used this component in your service
  • any feedback you have about its usage, for example accessibility or ideas for improvement

Add these comments to the identity bar discussion on Github.