Floating Action Button

FAB Layout
FAB Colors
Extended FAB
Speed Dial
FAB Morph
FAB App Methods
FAB Events
Control FAB With Links
CSS Variables
Examples

Floating action button (FAB) is used for a promoted action. They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.

FAB Layout

Layout of floating action button is very simple. Just put it as the direct child of page or view:

<!-- Page-->
<div class="page">
  <!-- Navbar-->
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="center">Floating Action Button</div>
    </div>
  </div>
  <!-- Floating Action Button -->
  <div class="fab fab-right-bottom">
    <a href="#">
      <i class="icon f7-icons">plus</i>
    </a>
  </div>
  <!-- Another Floating Action Button -->
  <div class="fab fab-left-bottom">
    <a href="#">
      <i class="icon f7-icons">plus</i>
    </a>
  </div>
  <!-- Scrollable Page Content-->
  <div class="page-content">
    <div class="block">
      Lorem ipsum dolor sit amet, ....
    </div>
  </div>
</div>

FAB position is configured via additional fab-[horizontal]-[vertical] class. The following clases are avaialble:

fab-right-bottom
fab-center-bottom
fab-left-bottom
fab-right-center
fab-center-center
fab-left-center
fab-right-top
fab-center-top
fab-left-top

FAB Colors

FAB supports all default colors. To change its color just add color-[color] class to FAB element.

<!-- Red FAB -->
<div class="fab fab-left-top color-red"></div>

<!-- Green FAB -->
<div class="fab fab-right-bottom color-green"></div>

Extended FAB

The extended FAB is wider, and it includes a text label. To make extended FAB we need to add additional fab-extended class to FAB element and put its extra text in <div class="fab-text"> element inside:

<!-- Additional fab-extended class -->
<div class="fab fab-extended fab-center-bottom">
  <a href="#">
    <i class="icon f7-icons">plus</i>
    <!-- Element with FAB text  -->
    <div class="fab-text">Create</div>
  </a>
</div>

Speed Dial

The floating action button can fling out related actions upon press. The button should remain on screen after the menu is invoked. Tapping in the same spot should either activate the most commonly used action or close the open menu.

In this case we need to add additional element with buttons:

<div class="fab fab-right-bottom">
  <a href="#">
    <!-- First icon is visible when Speed Dial actions are closed -->
    <i class="icon f7-icons">plus</i>
    <!-- Second icon is visible when Speed Dial actions are opened -->
    <i class="icon f7-icons">xmark</i>
  </a>
  <!-- Speed Dial action buttons -->
  <div class="fab-buttons fab-buttons-bottom">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
  </div>
</div>

Speed dial buttons container position is configured via additional class:

fab-buttons-top - buttons will appear on top of FAB
fab-buttons-right - buttons will appear on right of FAB
fab-buttons-bottom - buttons will appear on bottom of FAB
fab-buttons-left - buttons will appear on left of FAB
fab-buttons-center - buttons will appear around of FAB

Note that Speed Dial actions buttons will appear in reversed order
You shouldn't use more than 6 Speed Dial actions
You should use at least 3 Speed Dial actions

Speed Dial With Labels

Speed dial buttons also support additional text labels. In this case layout will be a bit extended:

<div class="fab-buttons fab-buttons-bottom">
  <!-- additional "fab-label-button" class on fab button -->
  <a href="#" class="fab-label-button">
    <!-- original button content -->
    <span>1</span>
    <!-- button label -->
    <span class="fab-label">Action 1</span>
  </a>
  <a href="#" class="fab-label-button">
    <span>2</span>
    <span class="fab-label">Action 2</span>
  </a>
  ...
</div>

Speed Dial With Backdrop

It is also possible to add backdrop (semi-transparent overlay) behind the FAB that will become visible on FAB open.

To make it work, we just need to add backdrop element on same level as FAB element:

<div class="page">
  <!-- FAB backdrop -->
  <div class="fab-backdrop"></div>

  <!-- FAB -->
  <div class="fab fab-right-bottom">
    ...
  </div>

  <div class="page-content">
    ...
  </div>
</div>

FAB Morph

There is also ability for FAB to morph to any visible element on page.

<div class="page">
  <div class="navbar">...</div>

  <!-- Toolbar has additional required "fab-morph-target" class -->
  <div class="toolbar toolbar-bottom fab-morph-target">
    ...
  </div>

  <!-- FAB will morph to toolbar -->
  <div class="fab fab-morph" data-morph-to=".toolbar">
    <i class="icon f7-icons">plus</i>
  </div>

  <div class="page-content">
    ...
  </div>
</div>

Where

data-morph-to - additional attribute on FAB where target element's CSS selector must be specified. In this example it points to Toolbar
fab-morph-target - additional required class on FAB morph target, in this example it is added to Toolbar

FAB App Methods

We can use following app methods to control FABs:

app.fab.open(fabEl, targetEl)	Open FAB speed dial actions/buttons, or morph it to specified target fabEl - HTMLElement or string (with CSS Selector) of required FAB targetEl - HTMLElement or string (with CSS Selector) of FAB morph target. Optional
app.fab.close(fabEl)	Close FAB speed dial actions/buttons, or morph it back from specified target fabEl - HTMLElement or string (with CSS Selector) of required FAB
app.fab.toggle(fabEl)	Toggle FAB speed dial actions/buttons fabEl - HTMLElement or string (with CSS Selector) of required FAB

FAB Events

FAB will fire the following DOM events on FAB element:

Event	Target	Description
fab:open	FAB Element<div class="fab">	Event will be triggered on FAB open or when it morphs to target element
fab:close	FAB Element<div class="fab">	Event will be triggered on FAB close or when it morphs back from target element

Control FAB With Links

It is possible to open and close required FAB (if you have it in DOM) using special classes and data attributes on links:

To open FAB speed dial actions we need to add fab-open class to any HTML element (prefered to link)
To close FAB speed dial or to morph FAB back from target we need to add fab-close class to any HTML element (prefered to link)
If you have more than one FAB in DOM, you need to specify appropriate FAB via additional data-fab=".some-fab" attribute on this HTML element

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

:root {
  --f7-fab-margin: 16px;
  --f7-fab-text-color: #fff;
  --f7-fab-extended-text-font-size: 14px;
  --f7-fab-extended-text-padding: 0 20px;
  --f7-fab-label-bg-color: #fff;
  --f7-fab-label-text-color: #333;
  --f7-fab-label-border-radius: 4px;
  --f7-fab-label-padding: 4px 12px;
  --f7-fab-label-font-size: inherit;
  --f7-fab-button-size: 40px;
  /* --f7-fab-pressed-bg-color: var(--f7-theme-color-shade); */
}
.ios {
  --f7-fab-size: 50px;
  --f7-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  --f7-fab-extended-size: 50px;
  --f7-fab-extended-text-font-weight: 600;
  --f7-fab-extended-text-letter-spacing: 0;
  --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
}
.md {
  --f7-fab-size: 56px;
  --f7-fab-box-shadow: var(--f7-elevation-6);
  --f7-fab-extended-size: 48px;
  --f7-fab-extended-text-font-weight: 500;
  --f7-fab-extended-text-letter-spacing: 0.05em;
  --f7-fab-label-box-shadow: var(--f7-elevation-3);
}
.aurora {
  --f7-fab-size: 56px;
  --f7-fab-box-shadow: var(--f7-elevation-6);
  --f7-fab-extended-size: 48px;
  --f7-fab-extended-text-font-weight: 600;
  --f7-fab-extended-text-letter-spacing: 0;
  --f7-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
}

Examples

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Floating Action Button</div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom fab-morph-target">
    <div class="toolbar-inner">
      <a class="link fab-close">Link 1</a>
      <a class="link fab-close">Link 2</a>
      <a class="link fab-close">Link 3</a>
    </div>
  </div>
  <div class="fab fab-left-top color-yellow">
    <a href="#">
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-bottom">
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
    </div>
  </div>
  <div class="fab fab-right-top color-pink">
    <a href="#">
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-left">
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
    </div>
  </div>
  <div class="fab fab-center-center color-green">
    <a href="#">
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-center">
      <a href="">1</a>
      <a href="">2</a>
      <a href="">3</a>
      <a href="">4</a>
    </div>
  </div>
  <div class="fab fab-left-bottom fab-morph" data-morph-to=".toolbar">
    <a href="#">
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
  </div>
  <div class="fab fab-right-bottom color-orange">
    <a href="#">
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-top">
      <a class="fab-label-button" href="#"><span>1</span><span class="fab-label">Action 1</span></a>
      <a class="fab-label-button" href="#"><span>2</span><span class="fab-label">Action 2</span></a>
    </div>
  </div>
  <div class="fab fab-extended fab-center-bottom color-red">
    <a href="#">
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon material-icons md-only">add</i>
      <div class="fab-text">Create</div>
    </a>
  </div>
  <div class="page-content">
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia
        mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus
        et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut
        tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem
        elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In
        sem dolor, tempus eu tellus quis, vulputate malesuada felis.</p>
      <p>In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat
        pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi,
        sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a
        est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.</p>
      <p>Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur
        at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem.
        Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.</p>
      <p>Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam
        viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est
        faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget
        cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.</p>
      <p>Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien
        interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean
        vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis
        ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum.
        Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium,
        tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis
        neque auctor ut.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia
        mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus
        et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut
        tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem
        elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In
        sem dolor, tempus eu tellus quis, vulputate malesuada felis.</p>
      <p>In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat
        pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi,
        sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a
        est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.</p>
      <p>Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur
        at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem.
        Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.</p>
      <p>Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam
        viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est
        faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget
        cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.</p>
      <p>Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien
        interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean
        vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis
        ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum.
        Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium,
        tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis
        neque auctor ut.</p>
    </div>
  </div>

With Backdrop

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">FAB Backdrop</div>
    </div>
  </div>
  <div class="fab-backdrop"></div>
  <div class="fab fab-right-bottom">
    <a href="#">
      <i class="icon f7-icons if-not-md">plus</i>
      <i class="icon f7-icons if-not-md">xmark</i>
      <i class="icon material-icons md-only">add</i>
      <i class="icon material-icons md-only">close</i>
    </a>
    <div class="fab-buttons fab-buttons-top">
      <a class="fab-label-button" href="#"><span>1</span><span class="fab-label">Action 1</span></a>
      <a class="fab-label-button" href="#"><span>2</span><span class="fab-label">Action 2</span></a>
    </div>
  </div>
  <div class="page-content">
    <div class="block">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia
        mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus
        et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut
        tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem
        elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In
        sem dolor, tempus eu tellus quis, vulputate malesuada felis.</p>
      <p>In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat
        pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi,
        sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a
        est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.</p>
      <p>Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur
        at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem.
        Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.</p>
      <p>Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam
        viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est
        faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget
        cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.</p>
      <p>Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien
        interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean
        vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis
        ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum.
        Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium,
        tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis
        neque auctor ut.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia
        mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus
        et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut
        tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem
        elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit.
        Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In
        sem dolor, tempus eu tellus quis, vulputate malesuada felis.</p>
      <p>In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat
        pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi,
        sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a
        est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.</p>
      <p>Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur
        at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem.
        Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.</p>
      <p>Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam
        viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est
        faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget
        cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.</p>
      <p>Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien
        interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean
        vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis
        ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum.
        Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium,
        tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis
        neque auctor ut.</p>
    </div>
  </div>
</div>