Skip to content

Navs

Jump to bottom
Jo Dickson edited this page Nov 7, 2019 · 3 revisions

Jump To Section:

[nav]

Generates a generic nav.

Attributes

Shortcode Attribute Name Description Default Value
element_type Element Type Specify the type of element to use.

Valid options:
  • ul
  • nav
  • div
 ul
class CSS Classes Separate each class with a single space. Refer to the Athena Framework documentation for available classes. nav is always applied
style Inline Styles Any additional styles for the element.
tablist Controls Tab Panes Enable this option if the nav contains links that toggle tab panes when clicked. Applies role="tablist" to the generated nav element. false

[nav-item]

Generates a nav item. Depending on the "element_type" attribute selected for the parent [nav] and its inner items, this shortcode may be optional.

Attributes

Shortcode Attribute Name Description Default Value
element_type Element Type Specify the type of element to use.

Valid options:
  • li
  • div
 li
class CSS Classes Separate each class with a single space. Refer to the Athena Framework documentation for available classes. nav-item is always applied
style Inline Styles Any additional styles for the element.

[nav-link]

Generates a nav link.

Attributes

Shortcode Attribute Name Description Default Value
href Nav Link URL for the link.
rel Link object relationship (rel) The relationship between the link and target object. Separate each link type with a single space.
new_window New Window Open link in a new window false
class CSS Classes Separate each class with a single space. Refer to the Athena Framework documentation for available classes. nav-link is always applied
id ID ID attribute for the element. Must be unique.
style Inline Styles Any additional styles for the element.
data_toggle Data-Toggle Type of toggling functionality the nav link should have.

Valid options:
  • pill
  • tab
  • dropdown

[tab-content]

Generates a wrapper for tab panes.

Attributes

Shortcode Attribute Name Description Default Value
class CSS Classes Separate each class with a single space. Refer to the Athena Framework documentation for available classes. tab-content is always applied
style Inline Styles Any additional styles for the element.

[tab-pane]

Generates a single tab pane.

Attributes

Shortcode Attribute Name Description Default Value
class CSS Classes Separate each class with a single space. Refer to the Athena Framework documentation for available classes. tab-pane is always applied
id ID ID attribute for the element. Must be unique.
labelledby Labelled By (ARIA) ID of an element that provides label or title text for the tab pane. In most cases, this value should be the ID of the pane's corresponding [nav-link]. Required for accessibility purposes.
style Inline Styles Any additional styles for the element.

Examples

Basic navs

TODO

Dynamic tabbed interfaces

[nav class="nav-tabs" tablist="true"]
[nav-item][nav-link id="tab-a" class="active" data_toggle="tab" href="#tab-pane-a"]Tab A[/nav-link][/nav-item]
[nav-item][nav-link id="tab-b" data_toggle="tab" href="#tab-pane-b"]Tab B[/nav-link][/nav-item]
[nav-item][nav-link id="tab-c" data_toggle="tab" href="#tab-pane-c"]Tab C[/nav-link][/nav-item]
[/nav]

[tab-content]
[tab-pane labelledby="tab-a" id="tab-pane-a" class="fade show active"]
Tab pane A
[/tab-pane]
[tab-pane labelledby="tab-b" class="fade" id="tab-pane-b"]
Tab pane B
[/tab-pane]
[tab-pane labelledby="tab-c" class="fade" id="tab-pane-c"]
Tab pane C
[/tab-pane]
[/tab-content]

Clone this wiki locally