Foundation 4 Documentation

Inline Lists

You can use this simple construct when you just need a horizontal list of links, like in a footer, and want more control than just spaces between them.

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5

Build With Predefined HTML Classes

There are two ways to build inline lists in Foundation 4: with our predefined HTML or with our mixins. Building inline lists using our predefined classes is easy. You'll start with an unordered list and add a class of .inline-list to it. From there, you just need to add list items with links in them.

<ul class="inline-list">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
</ul>

For these styles to come across, make sure you have the default Foundation CSS package or that you've selected inline-lists from a custom package. These should be linked up following our default HTML page structure.

Build with a Mixin

We've included SCSS mixins used to style inline lists. To use the mixin, you'll need to have the extension installed or grab _variables.scss, _global.scss and _inline-lists.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:

@import "foundation/variables";
@import "foundation/components/global";
@import "foundation/components/inline-lists";

Quick Mixin

You can build your inline lists using our global mixin by including it on your own custom class. The mixin contains all the necessary styles for positioning and styling the unordered list full of list items, the code looks like this:

.your-class-name { @include inline-list; }

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5

Default SCSS Variables

$include-html-inline-list-classes: $include-html-classes;

/* We use this to control the margins and padding of the inline list. */
$inline-list-top-margin: 0;
$inline-list-opposite-margin: 0;
$inline-list-bottom-margin: em-calc(17);
$inline-list-default-float-margin: em-calc(-22);

$inline-list-padding: 0;

/* We use this to control the overflow of the inline list. */
$inline-list-overflow: hidden;

/* We use this to control the list items */
$inline-list-display: block;

/* We use this to control any elments within list items */
$inline-list-children-display: block;

Note: em-calc(); is a function we wrote to convert px to em. It is included in _variables.scss.