aura
Home Aura
aura

Navigation

The Navigation component allows you to create simple navigation menus. It is a wrapper for a list of aura:nav.button components.

Attributes

  • text (String): The text to display in the link.
  • href (String): The URL to navigate to.
  • icon (String): The name of the icon to display next to the link.
  • active (Boolean): If present, the link will be styled as the current page.

Basic Usage

The link will autodetect if the current page is the same as the href attribute and style it accordingly. if you want to force the current page style, you can use the active attribute.

Copy to clipboard

<aura:nav>
    <aura:nav.button text="Home" active/>
    <aura:nav.button text="About" />
    <aura:nav.button text="Contact" />
</aura:nav>

Secondary Variant

The Navigation links can be styled using the variant attribute. The possible values are main, sub and toc, Default is main.

Copy to clipboard

<aura:nav sub>
    <aura:nav.button text="Home" active/>
    <aura:nav.button text="About" />
    <aura:nav.button text="Contact" />
</aura:nav>

Table of Contents

Toc variant creates a table of content style navigation. To utilize its functionality simply apply the attribute data-aura-anchor-heading to the elements you want to link to and render a aura:nav component with the toc variant. place all links in the aura:nav component then activate the links automatically.

Copy to clipboard

<aura:nav :title="__('On this page')" toc>
    @foreach ($items as $item)
        <aura:nav.button 
            id="{{ $item['slug'] }}"
            href="{{ $item['link'] }}"
            text="{{ $item['heading'] }}" 
        />
    @endforeach
</aura:nav>

Heading

When adding a title to the aura:nav component, it will be displayed as a heading.

Copy to clipboard

<aura:nav title="Main Navigation" sub>
    <aura:nav.button text="Home" active/>
    <aura:nav.button text="About" />
    <aura:nav.button text="Contact" />
</aura:nav>

With Icons

Copy to clipboard

<aura:nav>
    <aura:nav.button icon="home" ...  active/>
    <aura:nav.button icon="information-circle" ... />
    <aura:nav.button icon="envelope" ... />
</aura:nav>

The aura:nav.group component is used to group links together. This is useful for creating submenus.

Copy to clipboard

<aura:nav>
    <aura:nav.group text="Products">
        <aura:nav.button text="Product One" />
        <aura:nav.button text="Product Two" />
        <aura:nav.button text="Product Three" />
    </aura:nav.group>
    <aura:nav.button text="About" />
    <aura:nav.button text="Contact" />
</aura:nav>

Open Nav Group

The aura:nav.group component can be opened by default by using the open attribute.

Copy to clipboard

<aura:nav>
    <aura:nav.group text="Products" open>
        <-- Links -->
    </aura:nav.group>
</aura:nav>