Layout & Navigation Components
Components for organizing content and navigation: Accordion, Tabs, Dropdown Menu, Breadcrumbs, Context Menu, Command, and Navigation Menu.
Accordion
Collapsible content sections for organizing information. Supports single or multiple open items.
Single Open (Default)
Noundry UI is a modern C# ASP.NET TagHelper library that provides 70 server-side components with Alpine.js and Tailwind CSS integration for building beautiful, interactive web applications.
Simply run dotnet add package Noundry.UI and add the TagHelper to your _ViewImports.cshtml file.
Noundry UI requires Alpine.js for interactivity and Tailwind CSS for styling. Both are included via CDN by default.
Multiple Open
This accordion allows multiple sections to be open at once.
Both this section and the first section can be open simultaneously.
You can toggle sections independently.
View Code
<!-- Single Open Accordion -->
<noundry-accordion multiple="false">
<noundry-accordion-item title="Section 1" open="true">
Content for section 1
</noundry-accordion-item>
<noundry-accordion-item title="Section 2">
Content for section 2
</noundry-accordion-item>
</noundry-accordion>
<!-- Multiple Open Accordion -->
<noundry-accordion multiple="true">
<noundry-accordion-item title="Section 1" open="true">
Content for section 1
</noundry-accordion-item>
<noundry-accordion-item title="Section 2" open="true">
Content for section 2
</noundry-accordion-item>
</noundry-accordion>Accordion Properties
| Property | Type | Default | Description |
|---|---|---|---|
multiple | bool | false | Allow multiple items to be open simultaneously |
css-class | string | null | Additional CSS classes |
Accordion Item Properties
| Property | Type | Default | Description |
|---|---|---|---|
title | string | required | Item header text |
open | bool | false | Initially expanded |
icon | string | null | Optional icon name |
Tabs
Tab-based content switching with animated indicator. Supports underline, pills, and bordered variants.
Underline Style (Default)
This is the overview tab content. Tabs provide a clean way to organize content into different sections.
Features tab showcasing various capabilities: keyboard navigation, dynamic content, and more.
Settings and configuration options for your application would appear here.
This tab is disabled.
View Code
<noundry-tabs variant="underline">
<noundry-tab-item title="Overview" active="true">
<div class="p-4">
<p>This is the overview tab content.</p>
</div>
</noundry-tab-item>
<noundry-tab-item title="Features">
<div class="p-4">
<p>Features content here.</p>
</div>
</noundry-tab-item>
<noundry-tab-item title="Disabled" disabled="true">
<div class="p-4">
<p>This tab is disabled.</p>
</div>
</noundry-tab-item>
</noundry-tabs>Tabs Properties
| Property | Type | Default | Description |
|---|---|---|---|
variant | string | "underline" | Tab style: underline, pills, bordered |
css-class | string | null | Additional CSS classes |
Tab Item Properties
| Property | Type | Default | Description |
|---|---|---|---|
title | string | required | Tab label text |
active | bool | false | Initially active tab |
icon | string | null | Optional icon |
disabled | bool | false | Disable the tab |
Dropdown Menu
User menus and context dropdowns with optional avatar. Perfect for user actions and navigation menus.
View Code
<!-- Basic Dropdown -->
<noundry-dropdown-menu button-text="Actions" position="left">
<noundry-dropdown-item text="Edit" icon="edit" />
<noundry-dropdown-item text="Duplicate" icon="copy" />
<noundry-dropdown-item is-separator="true" />
<noundry-dropdown-item text="Delete" icon="trash" />
</noundry-dropdown-menu>
<!-- With User Avatar -->
<noundry-dropdown-menu
button-text="Account"
avatar-url="https://ui-avatars.com/api/?name=John+Doe"
user-name="John Doe"
user-subtitle="john@example.com">
<noundry-dropdown-item text="Profile" icon="user" href="/profile" />
<noundry-dropdown-item text="Settings" icon="settings" />
<noundry-dropdown-item text="Shortcuts" shortcut="Ctrl+K" />
<noundry-dropdown-item is-separator="true" />
<noundry-dropdown-item text="Logout" icon="external-link" />
</noundry-dropdown-menu>Dropdown Menu Properties
| Property | Type | Default | Description |
|---|---|---|---|
button-text | string | "Menu" | Trigger button text |
button-variant | string | "secondary" | Button style variant |
avatar-url | string | null | User avatar image URL |
user-name | string | null | User name for header |
user-subtitle | string | null | User email/subtitle |
position | string | "left" | Dropdown position: left, right |
Breadcrumbs
Navigation path indicators with home icon support. Shows users their location in your application.
Standard Breadcrumbs
Custom Separator
Without Home Icon
View Code
<!-- Standard Breadcrumbs -->
<noundry-breadcrumbs>
<noundry-breadcrumb-item href="/" text="Home" />
<noundry-breadcrumb-item href="/products" text="Products" />
<noundry-breadcrumb-item text="Details" />
</noundry-breadcrumbs>
<!-- Custom Separator -->
<noundry-breadcrumbs separator=">">
<noundry-breadcrumb-item href="/" text="Home" />
<noundry-breadcrumb-item text="Current Page" />
</noundry-breadcrumbs>
<!-- Without Home Icon -->
<noundry-breadcrumbs show-home-icon="false">
<noundry-breadcrumb-item href="/" text="Dashboard" />
<noundry-breadcrumb-item text="Settings" />
</noundry-breadcrumbs>Breadcrumbs Properties
| Property | Type | Default | Description |
|---|---|---|---|
separator | string | "/" | Separator character |
show-home-icon | bool | true | Show home icon for first item |
Context Menu
Right-click context menus with submenus and checkboxes. Provides desktop-like context menu functionality.
View Code
<noundry-context-menu>
<div slot="trigger" class="p-8 border-2 border-dashed rounded-lg">
Right-click here
</div>
<noundry-context-menu-item text="Edit" icon="edit" />
<noundry-context-menu-item text="Copy" shortcut="Ctrl+C" />
<noundry-context-menu-item text="Paste" shortcut="Ctrl+V" />
<noundry-context-menu-item is-separator="true" />
<noundry-context-menu-item text="Delete" icon="trash" />
</noundry-context-menu>Context Menu Item Properties
| Property | Type | Default | Description |
|---|---|---|---|
text | string | null | Item label |
icon | string | null | Icon name |
shortcut | string | null | Keyboard shortcut display |
is-separator | bool | false | Render as separator line |
Command Palette
Command palette with search and keyboard navigation. Perfect for power users and quick navigation.
View Code
<noundry-command placeholder="Type a command or search...">
<noundry-command-group title="Actions">
<noundry-command-item text="New File" icon="plus" shortcut="Ctrl+N" />
<noundry-command-item text="Save" icon="check" shortcut="Ctrl+S" />
<noundry-command-item text="Search" icon="search" shortcut="Ctrl+K" />
</noundry-command-group>
<noundry-command-group title="Navigation">
<noundry-command-item text="Go to Dashboard" icon="home" />
<noundry-command-item text="Go to Settings" icon="settings" />
<noundry-command-item text="Go to Profile" icon="user" />
</noundry-command-group>
</noundry-command>Command Properties
| Property | Type | Default | Description |
|---|---|---|---|
placeholder | string | "Type a command..." | Search input placeholder |
Command Item Properties
| Property | Type | Default | Description |
|---|---|---|---|
text | string | required | Command text |
icon | string | null | Icon name |
shortcut | string | null | Keyboard shortcut |
Navigation Menu
Advanced navigation with dropdowns and nested items. Ideal for main application navigation.
View Code
<noundry-navigation-menu>
<noundry-navigation-menu-item text="Home" href="/" />
<noundry-navigation-menu-item text="Components" href="/components" />
<noundry-navigation-menu-item text="Documentation" href="/docs" />
<noundry-navigation-menu-item text="About" href="/about" />
</noundry-navigation-menu>Navigation Menu Item Properties
| Property | Type | Default | Description |
|---|---|---|---|
text | string | required | Menu item text |
href | string | null | Link URL |