Action Bar

Available since 1.1.0

The Action Bar is located at the top of the page and is used for the following:

  • Page title
  • Main Actions for the page

Although the following examples use the <h3> tag for the title element, the styling provided by SAP Fundamentals will remain consistent for any heading level used. <h1> should be reserved for the page title.

Action bar with back button, description and action buttons.

Page Title

Action bar Description 

<div class="fd-action-bar">
    <div class="fd-action-bar__back">
        <button class="fd-button--light fd-button--compact sap-icon--nav-back"></button>
    </div>
    <div class="fd-action-bar__header">
        <h3 class="fd-action-bar__title">
        Page Title
        </h3>
        <p class="fd-action-bar__description">Action bar Description </p>
    </div>
    <div class="fd-action-bar__actions">
        <button class=" fd-button--primary fd-button--l">Button</button>
        <button class=" fd-button--main fd-button--l">Button</button>
    </div>
</div>


Action bar with no Back button

Page Title

Action bar Description 

<div class="fd-action-bar">
    <div class="fd-action-bar__header">
        <h3 class="fd-action-bar__title">
            Page Title
        </h3>
        <p class="fd-action-bar__description">Action bar Description </p>
    </div>
    <div class="fd-action-bar__actions">
        <button class=" fd-button--primary fd-button--l">Button</button>
        <button class=" fd-button--main fd-button--l">Button</button>
    </div>
</div>


Several Main Actions in a Contextual Menu

When there are several main actions for a page, consider displaying them under a contextual menu. This allows the user to look in the same position they are used to but avoids cluttering the action bar with more than 3-4 actions. This also works well for a responsive/adaptive application.

Page Title 

<div class="fd-action-bar">
    <div class="fd-action-bar__header">
      <h3 class="fd-action-bar__title">
          Page Title
      </h3>
    </div>
    <div class="fd-action-bar__actions">
            <div class="fd-popover">
                <div class="fd-popover__control">
                    <button class="fd-button--light sap-icon--overflow"
                    aria-controls="wgxzK859" aria-haspopup="true" aria-expanded="false" aria-label="More"></button>
                </div>
                <div class="fd-popover__body" aria-hidden="true" id="wgxzK859">
                    <nav class="fd-menu" id="">
                        <ul class="fd-menu__list">
                            <li><a href="#" class="fd-menu__item">Edit</a></li>
                            <li><a href="#" class="fd-menu__item">Delete</a></li>
                            <li><a href="#" class="fd-menu__item">Assign</a></li>
                            <li><a href="#" class="fd-menu__item">Expire</a></li>
                            <li><a href="#" class="fd-menu__item">Archive</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
</div>


Action bar mobile view

Action Bar with description and back button 

<div style="width:319px;">
    <div class="fd-action-bar">
        <div class="fd-action-bar__back">
            <button class="fd-button--light fd-button--compact sap-icon--nav-back" aria-label="Back"></button>
        </div>
        <div class="fd-action-bar__header">
            <h3 class="fd-action-bar__title">
                Action Bar with description and back button
            </h3>
        </div>
        <div class="fd-action-bar__actions">
            <div class="fd-popover">
                <div class="fd-popover__control">
                    <button class="fd-button--light sap-icon--overflow"
                    aria-controls="wgxzK85" aria-haspopup="true" aria-expanded="false" aria-label="More"></button>
                </div>
                <div class="fd-popover__body" aria-hidden="true" id="wgxzK85">
                    <nav class="fd-menu" id="">
                        <ul class="fd-menu__list">
                            <li><a href="#" class="fd-menu__item">Option 1</a></li>
                            <li><a href="#" class="fd-menu__item">Option 2</a></li>
                            <li><a href="#" class="fd-menu__item">Option 3</a></li>
                            <li><a href="#" class="fd-menu__item">Option 4</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>