Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Admin Bar

The admin bar is visible throughout FutureLearn to all those who are logged-in with Course Creator permissions. It allows for easy switching between FutureLearn, Course Creator and any additional tools that we might introduce in future.

The admin bar consists of an application navigation and a contextual link. The application navigation directs to a user-specific index page. The contextual link allows navigation between editing or managing content in Course Creator, and viewing the changes on the learning platform.

.m-admin-bar
  .a-divider-bar
  .m-admin-bar__nav
    %a.a-button.a-button--spacious.m-admin-bar__dotnav.js-popover-trigger{href: "#admin-options", title: 'Your Products', class: "", "data-popover": 'admin-options', "aria-expanded": "false", "aria-controls": "admin-options"}
      = render partial: "shared/svg_icons/pull"

    %nav.m-popover.m-popover--admin-options#admin-options{role: "navigation"}
      %ul.m-popover__list
        %li.m-popover__list-item.m-icon-with-text
          = navigation_link_to('FutureLearn', :home, '/path', class: 'm-popover__list-link m-popover__list-link--active')
        %li.m-popover__list-item.m-icon-with-text
          = navigation_link_to('Partner Product', :educator, '/path', class: 'm-popover__list-link')

    %h2.m-admin-bar__title
      = display_current_application('learning-application')

    .m-admin-bar__contextual-area
      = content_for :admin_bar_contextual_content

    .m-admin-bar__user-area
      .m-icon-with-text
        = navigation_link_to('Edit link', :study_groups, '/path', class: 'm-admin-bar__link')