foundation-anchor

foundation-anchor is a control (likely <button>) to simulate the purpose of <a>.

Markup

.foundation-anchor

Indicates the control. When click event is triggered at this element, it will make the browser navigate similar to an <a>.

Selector Rule:

.foundation-anchor

[data-foundation-anchor-href]

The location of the linked resource for the navigation.

Selector Rule:

.foundation-anchor[data-foundation-anchor-href]

[data-foundation-anchor-target]

Indicates where to display the linked resource.

Selector Rule:

.foundation-anchor[data-foundation-anchor-target]

Example

Sometimes there is a case when you are unable to use <a> in your markup. For example given a following menu:

<menu>
  <menuitem label="Navigate">
  <menuitem label="Another action">
</menu>

When the user click on the “Navigate”, the browser needs to navigate to a URL.

In order to do this, you can annotate the <menuitem> to use foundation-anchor:

<menu>
  <menuitem label="Navigate" class="foundation-anchor" data-foundation-anchor-href="/content.html">
  <menuitem label="Another action">
</menu>