Components Identity bar

Last updated: 29 March 2022

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>"
  }
}) }}

To use the component in your design, add the MoJ Figma Kit to your Figma libraries and find the component using the Assets tab.

View component in MoJ Figma Kit

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.

How to use

Action menu

You can optionally configure the component to display actions that the user can take from within any sub section.

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">
          <div class="moj-button-menu__wrapper">

            <a href="#" role="button" draggable="false" class="govuk-button moj-button-menu__item  " 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>

          </div>
        </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: "#"
      },
      {
        text: "Secondary action",
        href: "#",
        classes: "govuk-button--secondary"
      }
    ]
  }]
}) }}

To use the component in your design, add the MoJ Figma Kit to your Figma libraries and find the component using the Assets tab.

View component in MoJ Figma Kit

The action menu uses the menu component which can be configured to show as a drop down menu.

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">
          <div class="moj-button-menu__wrapper">

            <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>

</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',
      classes: 'govuk-button--secondary',
      href: "#"
    }, {
      text: 'Secondary action',
      classes: 'govuk-button--secondary',
      href: "#"
    }, {
      text: 'Tertiary action',
      classes: 'govuk-button--secondary',
      href: "#"
    }]
  }]
}) }}

new MOJFrontend.ButtonMenu({
  container: document.querySelector(".moj-button-menu"),
  buttonText: "Actions",
  buttonClasses:
    "govuk-button--secondary moj-button-menu__toggle-button--secondary",
  menuClasses: "moj-button-menu__wrapper--right",
});

To use the component in your design, add the MoJ Figma Kit to your Figma libraries and find the component using the Assets tab.

View component in MoJ Figma Kit

Primary button plus secondary action menu

This menu is made up of multiple menus. The first consists of just one button and is exposed because it's a primary action. The second menu consists of two secondary options, which are placed within a drop down menu.

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">
          <div class="moj-button-menu__wrapper">

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

          </div>
        </div>

      </div>

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

        <div class="moj-button-menu">
          <div class="moj-button-menu__wrapper">

            <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>

</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'
    }]
  }, {
    items: [{
      text: 'Secondary action',
      classes: 'govuk-button--secondary',
      href: "#"
    }, {
      text: 'Tertiary action',
      classes: 'govuk-button--secondary',
      href: "#"
    }]
  }]
}) }}

new MOJFrontend.ButtonMenu({
  container: document.querySelectorAll(".moj-button-menu")[1],
  mq: "(min-width: 1000em)",
  buttonText: "More actions",
  buttonClasses:
    "govuk-button--secondary moj-button-menu__toggle-button--secondary",
  menuClasses: "moj-button-menu__wrapper--right",
});

To use the component in your design, add the MoJ Figma Kit to your Figma libraries and find the component using the Assets tab.

View component in MoJ Figma Kit