Skip to content

Interior Menu

Table of Contents

  1. Specifications
    1. Properties
  2. Changelog
  3. Examples

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
headerstring shown in the toggle to expand/close the menu panel Yes-
panel_classstring color applied to toggle button when open No-
parent_itemobject top-level menu item Yes-
└ titlestring text of menu item Yes-
└ urlstring URL of menu item Yes-
parent_item_tagstring tag to use for parent item. Defaults to 'h2' No-
itemsarray main list of pages Yes-
└ itemobject single page --
└ titlestring text of menu item Yes-
└ urlstring URL of menu item Yes-
└ currentboolean Whether the menu item is the current page we are on. Defaults to false. No-
└ externalboolean Whether the menu item links to an external page. Defaults to false. No-

Changelog

6.16.2 (2024-10-30)

  • fix: restore underline to top level link (#676) (25fade6)

6.8.2 (2024-04-02)

  • fix: update styles for new color system (b729c9d)

1.0.0

  • interior-menu added

Examples

Interior Menu - One Column

Admissions 

{% set parent_item = {
    title: "Admissions", 
    url: "#admissions" 
} %}

{% set menu = [
    {
        title: "Child Page 1",
        url: "#child-page-1"
    },
    {
        title: "Child Page 2",
        url: "#child-page-2",
        current: true
    },
    {
        title: "Child Page 3",
        url: "#child-page-3"
    },
    {
        title: "Child Page 4",
        url: "#child-page-4"
    },
    {
        title: "External Page",
        url: "#external-page",
        external: true
    },
    {
        title: "Child Page 5",
        url: "#child-page-5"
    }
] %}
 
<x-interior-menu :items="menu" header="Explore Admissions" :parent_item="parent_item" />

Interior Menu - Two Columns

In this example, the interior menu is is defaulted to open. It also has a fixed black background color on the header when opened.

Admissions

Content

Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui.

Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.

{% set parent_item = {
    title: "Admissions", 
    url: "#admissions" 
} %}

{% set menu = [
    {
        title: "Entrepreneurship",
        url: "#child-page-1"
    },
    {
        title: "Healthcare Administration",
        url: "#child-page-2",
        current: true
    },
    {
        title: "Child Page 3 Here we can see what a child page with a really long title would look like",
        url: "#child-page-3"
    },
    {
        title: "Child Page 4",
        url: "#child-page-4"
    },
    {
        title: "External Page",
        url: "#external-page",
        external: true
    },
    {
        title: "Child Page 5",
        url: "#child-page-5"
    },
    {
        title: "Child Page 6",
        url: "#child-page-6"
    },
    {
        title: "Child Page 7",
        url: "#child-page-7"
    },
    {
        title: "Child Page 8",
        url: "#child-page-8"
    }
] %}
 
<x-two-columns class="tux-c-two-columns--35-65">
	<x-slot name="content">
		<x-two-columns__col>
			<x-slot name="content">
				<x-interior-menu :items="menu" header="Concentrations" :parent_item="parent_item"  data-header-color="black" open/>
			</x-slot>
		</x-two-columns__col>
		<x-two-columns__col>
			<x-slot name="content">
				<h3>Content</h3>
                <p>Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui.</p>
                <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
			</x-slot>
		</x-two-columns__col>
	</x-slot>
</x-two-columns>

Interior Menu - Hero

Subheading Heading Text

Admissions

Form Placeholder
{% set parent_item = {
    title: "Admissions", 
    url: "#admissions" 
} %}

{% set menu = [
    {
        title: "Child Page 1",
        url: "#child-page-1"
    },
    {
        title: "Child Page 2",
        url: "#child-page-2",
        current: true
    },
    {
        title: "Child Page 3",
        url: "#child-page-3"
    },
    {
        title: "Child Page 4",
        url: "#child-page-4"
    },
    {
        title: "External Page",
        url: "#external-page",
        external: true
    },
    {
        title: "Child Page 5",
        url: "#child-page-5"
    }
] %}
 
<x-hero-b image="courtyard-wide.jpg" heading="Heading Text" subheading="Subheading" :form="true">
    <x-slot name="content">
        
        {{ include( "docs/components/interior-menu/interior-menu-one-column.twig" ) }}
    </x-slot>
</x-hero-b>