Navigation

Direct users around in style. There are navigation options for a number of situations, and everything is designed to work cross-device.

Nav Bar

The default top nav bar for Foundation includes the main nav options as well as hover dropdowns that support either a list of anchors or arbitrary content (even Grid content).

  • Nav Item 1
  • Nav Item 2
  • Nav Item 3
    Regular Dropdown

    This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.

    This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.

  • Nav Item 4
    Large Dropdown

    This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.

    This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.

    This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.

    This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.

Dropdown Lists

In the nav bar you can use a dropdown to only contain a ul of anchors, which will act as a dropdown on hover. The individual entry includes a main link (which can lead to a top-level page) and the dropdown element. Note that dropdowns require the parent to have .has-flyout.

Arbitrary Content Dropdowns

You can also have dropdowns with a specific size which can contain any kind of content, including rows and columns.

Flyout Direction

Flyouts are pinned left by default, but you can pin them right in instances where they may run off the page or over other content by adding .right to the div.flyout element.

Flyouts also go down by default, but if your nav bar is on the bottom you can have the flyouts expand up by adding a class of .up to the .flyout element.

Vertical Nav

The same nav bar seen above, with the same structure, can be made a vertical nav bar that still supports flyout content by adding a class of .vertical to the element. This is ideal for sidebar navigation, and is very similar to the vertical tabs seen on the Tabs documentation page.

Side Nav

Side nav, like you'll see on the Foundation main site, is useful for sections either of a site or of the page.

Sub Nav

This simple subnav is great for moving between different states of a page. We use these frequently to show iterations of something, typically by date, but they're also handy for these like filters.

Filter:
All
Active
Pending
Suspended

Pagination

Moving between pages has become less common with the advent of longer pages and AJAX loading, but it can still be useful for long repetitive listings or content.

Get Yii Foundation

Download Yii Foundation here to get started quickly. Includes everything you need to get your proyects up and running, take a look at the Setup Guide.

Download Yii Foundation

Yii Foundation 2

Looking for Yii Foundation 2 Documentation?

Yii Foundation 2 Documentation