Skip to content

Interior Menu

Specifications

Properties

PropertyTypeDescriptionRequiredDefault
headerstring shown in the toggle to expand/close the menu panelYes-
panel_classstring color applied to toggle button when openNo-
parent_itemobject top-level menu itemYes-
└ titlestring text of menu itemYes-
└ urlstring URL of menu itemYes-
parent_item_tagstring tag to use for parent item. Defaults to 'h2'No-
itemsarray main list of pagesYes-
└ itemobject single page--
└ titlestring text of menu itemYes-
└ urlstring URL of menu itemYes-
└ 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

{% 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.

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

{% 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>