@sociallane/elements 1.0.0

package/packages/widgets/nav-compact/nav-compact.php

@@ -0,0 +1,350 @@
+<?php
+/**
+ * Widget: Nav
+ *
+ * A semantic navigation bar with optional logo, WordPress menu, and CTA.
+ * Supports skip link, mobile toggle (aria-expanded), and light/dark theme.
+ *
+ * @package SocialLane_Elements
+ */
+
+namespace SocialLane\Elements;
+
+use Elementor\Controls_Manager;
+use Elementor\Widget_Base;
+use SocialLane\Elements\Traits\Animation_Controls;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Nav Widget
+ */
+class Nav_Compact extends Widget_Base {
+
+	use Animation_Controls;
+
+	public function get_name(): string {
+		return 'nav-compact';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Nav (Compact)', 'sociallane-elements' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-nav-menu';
+	}
+
+	public function get_categories(): array {
+		return [ 'sociallane-navigation' ];
+	}
+
+	public function get_keywords(): array {
+		return [ 'nav', 'menu', 'navigation', 'header', 'links' ];
+	}
+
+	protected function register_controls(): void {
+		$this->register_logo_section();
+		$this->register_menu_section();
+		$this->register_cta_section();
+		$this->register_layout_section();
+		$this->register_animation_controls();
+	}
+
+	private function register_logo_section(): void {
+		$this->start_controls_section(
+			'section_logo',
+			[
+				'label' => esc_html__( 'Logo', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'show_logo',
+			[
+				'label'   => esc_html__( 'Show Logo', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+
+		$this->add_control(
+			'logo_type',
+			[
+				'label'     => esc_html__( 'Logo Type', 'sociallane-elements' ),
+				'type'      => Controls_Manager::SELECT,
+				'default'   => 'text',
+				'options'   => [
+					'text'  => esc_html__( 'Text', 'sociallane-elements' ),
+					'image' => esc_html__( 'Image', 'sociallane-elements' ),
+				],
+				'condition' => [
+					'show_logo' => 'yes',
+				],
+			]
+		);
+
+		$this->add_control(
+			'logo_text',
+			[
+				'label'       => esc_html__( 'Logo Text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => esc_html__( 'Lorem Ipsum', 'sociallane-elements' ),
+				'condition'   => [
+					'show_logo'  => 'yes',
+					'logo_type'  => 'text',
+				],
+			]
+		);
+
+		$this->add_control(
+			'logo_image',
+			[
+				'label'     => esc_html__( 'Logo Image', 'sociallane-elements' ),
+				'type'      => Controls_Manager::MEDIA,
+				'condition' => [
+					'show_logo' => 'yes',
+					'logo_type' => 'image',
+				],
+			]
+		);
+
+		$this->add_control(
+			'logo_alt',
+			[
+				'label'       => esc_html__( 'Logo Alt Text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'description' => esc_html__( 'Required for accessibility when using image', 'sociallane-elements' ),
+				'condition'   => [
+					'show_logo' => 'yes',
+					'logo_type' => 'image',
+				],
+			]
+		);
+
+		$this->add_control(
+			'logo_url',
+			[
+				'label'     => esc_html__( 'Logo Link URL', 'sociallane-elements' ),
+				'type'      => Controls_Manager::URL,
+				'condition' => [
+					'show_logo' => 'yes',
+				],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_menu_section(): void {
+		$this->start_controls_section(
+			'section_menu',
+			[
+				'label' => esc_html__( 'Menu', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$menus   = wp_get_nav_menus();
+		$options = [
+			'' => esc_html__( '— Select a menu —', 'sociallane-elements' ),
+		];
+		foreach ( $menus as $menu ) {
+			$options[ (string) $menu->term_id ] = $menu->name;
+		}
+
+		$this->add_control(
+			'menu',
+			[
+				'label'       => esc_html__( 'WordPress Menu', 'sociallane-elements' ),
+				'type'        => Controls_Manager::SELECT,
+				'options'     => $options,
+				'default'     => '',
+				'description' => esc_html__( 'Create and manage menus under Appearance → Menus.', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'submenu_style',
+			[
+				'label'       => esc_html__( 'Submenu style', 'sociallane-elements' ),
+				'type'        => Controls_Manager::SELECT,
+				'default'     => 'dropdown',
+				'options'     => [
+					'dropdown' => esc_html__( 'Dropdown', 'sociallane-elements' ),
+					'mega'     => esc_html__( 'Mega menu', 'sociallane-elements' ),
+				],
+				'description' => esc_html__( 'Mega menu: full-width panel with link columns and optional CTA column. Never wider than the page container.', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'mega_cta_heading',
+			[
+				'label'     => esc_html__( 'Mega CTA heading', 'sociallane-elements' ),
+				'type'      => Controls_Manager::TEXT,
+				'placeholder' => esc_html__( 'Our brands', 'sociallane-elements' ),
+				'condition' => [ 'submenu_style' => 'mega' ],
+			]
+		);
+
+		$this->add_control(
+			'mega_cta_text',
+			[
+				'label'       => esc_html__( 'Mega CTA description', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXTAREA,
+				'placeholder' => esc_html__( 'At [Company], we pride ourselves on a portfolio of brands that cater to a variety of preferences.', 'sociallane-elements' ),
+				'condition'   => [ 'submenu_style' => 'mega' ],
+			]
+		);
+
+		$this->add_control(
+			'mega_cta_link_text',
+			[
+				'label'       => esc_html__( 'Mega CTA link text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => esc_html__( 'Explore our brands', 'sociallane-elements' ),
+				'condition'   => [ 'submenu_style' => 'mega' ],
+			]
+		);
+
+		$this->add_control(
+			'mega_cta_url',
+			[
+				'label'     => esc_html__( 'Mega CTA link URL', 'sociallane-elements' ),
+				'type'      => Controls_Manager::URL,
+				'condition' => [ 'submenu_style' => 'mega' ],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_cta_section(): void {
+		$this->start_controls_section(
+			'section_cta',
+			[
+				'label' => esc_html__( 'Call to Action', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'show_cta',
+			[
+				'label'   => esc_html__( 'Show Button', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+
+		$this->add_control(
+			'cta_text',
+			[
+				'label'   => esc_html__( 'Button Text', 'sociallane-elements' ),
+				'type'    => Controls_Manager::TEXT,
+				'default' => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+				'condition' => [
+					'show_cta' => 'yes',
+				],
+			]
+		);
+
+		$this->add_control(
+			'cta_url',
+			[
+				'label'     => esc_html__( 'Button URL', 'sociallane-elements' ),
+				'type'      => Controls_Manager::URL,
+				'condition' => [
+					'show_cta' => 'yes',
+				],
+			]
+		);
+		$this->add_control(
+			'cta_style',
+			[
+				'label'     => esc_html__( 'Button style', 'sociallane-elements' ),
+				'type'      => Controls_Manager::SELECT,
+				'default'   => 'primary',
+				'options'   => sociallane_get_button_preset_options(),
+				'condition' => [ 'show_cta' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'cta_color',
+			[
+				'label'     => esc_html__( 'Button color', 'sociallane-elements' ),
+				'type'      => Controls_Manager::SELECT,
+				'default'   => 'default',
+				'options'   => function_exists( 'sociallane_get_button_color_options' ) ? sociallane_get_button_color_options() : [ 'default' => esc_html__( 'Default (brand)', 'sociallane-elements' ) ],
+				'condition' => [ 'show_cta' => 'yes' ],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_layout_section(): void {
+		$this->start_controls_section(
+			'section_layout',
+			[
+				'label' => esc_html__( 'Layout', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'show_skip_link',
+			[
+				'label'   => esc_html__( 'Show Skip Link', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+				'description' => esc_html__( 'Accessibility: skip to main content', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'skip_link_target',
+			[
+				'label'       => esc_html__( 'Skip Link Target ID', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => 'main-content',
+				'description' => esc_html__( 'ID of the main content element (without #)', 'sociallane-elements' ),
+				'condition'   => [
+					'show_skip_link' => 'yes',
+				],
+			]
+		);
+
+		$this->add_control(
+			'show_theme_switcher',
+			[
+				'label'   => esc_html__( 'Show Theme Switcher', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+				'description' => esc_html__( 'Allow visitors to toggle between light and dark mode.', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'sticky',
+			[
+				'label'   => esc_html__( 'Sticky on scroll', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => '',
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	protected function render(): void {
+		$settings = $this->get_settings_for_display();
+		require_once __DIR__ . '/data/view.php';
+		$view = prepare_nav_compact_view( $settings, $this->get_id() );
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}

package/packages/widgets/nav-compact/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@sociallane/widget-nav-compact",
+  "version": "1.0.0",
+  "private": true,
+  "description": "SocialLane Elements widget: nav-compact",
+  "peerDependencies": {
+    "@sociallane/core": "^1.0.0"
+  },
+  "scripts": {
+    "build": "echo \"No widget-specific build\""
+  }
+}

package/packages/widgets/nav-compact/templates/partials/desktop-mega-panel.php

@@ -0,0 +1,109 @@
+<?php
+/**
+ * Nav desktop mega menu panel
+ *
+ * Layout: 3 link columns (each row = chevron + bold title + grey description)
+ * plus optional 4th CTA column (heading, paragraph, link with arrow).
+ * Content never wider than container (max-w-screen-xl).
+ *
+ * Expects: $item (top-level with children[].children[]), $view (classes, mega_cta), $mega_id
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! is_array( $item ?? null ) || empty( $item['children'] ) || ! is_array( $item['children'] ) ) {
+	return;
+}
+
+$view['classes'] = is_array( $view['classes'] ?? null ) ? $view['classes'] : [];
+$view['classes'] = array_merge( [ 'link' => '' ], $view['classes'] );
+$view['mega_cta'] = is_array( $view['mega_cta'] ?? null ) ? $view['mega_cta'] : null;
+
+$panel_bg   = 'bg-white dark:bg-neutral-900 border-t border-neutral-200 dark:border-neutral-700 shadow-lg';
+$link_class = $view['classes']['link'] . ' focus:outline-none focus:ring-2 focus:ring-primary focus:ring-inset rounded';
+$has_cta    = ! empty( $view['mega_cta'] ) && ( ( $view['mega_cta']['heading'] ?? '' ) !== '' || ( $view['mega_cta']['text'] ?? '' ) !== '' || ( $view['mega_cta']['link_text'] ?? '' ) !== '' );
+$grid_cols  = $has_cta ? 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4' : 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3';
+?>
+<div class="nav-mega-panel w-full min-w-0 pt-2" role="menu">
+	<div class="<?php echo esc_attr( $panel_bg ); ?> w-full min-w-0">
+		<div class="mx-auto max-w-screen-xl px-4 py-4 sm:py-6 sm:px-6 md:px-8">
+			<div class="grid <?php echo esc_attr( $grid_cols ); ?> gap-6 sm:gap-8 text-sm">
+				<?php /* Link columns: each column = one level-2 section; each row = chevron + title + description */ ?>
+<?php foreach ( $item['children'] as $col_index => $child ) : ?>
+	<?php if ( ! is_array( $child ) ) : ?>
+		<?php continue; ?>
+	<?php endif; ?>
+					<div class="p-4 md:pb-4" role="group" aria-label="<?php echo esc_attr( $child['label'] ); ?>">
+						<ul class="space-y-4">
+							<li>
+								<a
+									href="<?php echo esc_url( $child['href'] ); ?>"
+									<?php echo $child['attrs']; ?>
+									class="<?php echo esc_attr( $link_class ); ?> group/link flex gap-3 py-0"
+									role="menuitem"
+								>
+									<span class="min-w-0">
+										<span class="block font-semibold text-neutral-900 dark:text-white"><?php echo $child['label']; ?></span>
+										<?php if ( ! empty( $child['description'] ) ) : ?>
+											<span class="mt-0.5 block text-neutral-500 dark:text-neutral-400"><?php echo $child['description']; ?></span>
+										<?php endif; ?>
+									</span>
+									<span class="shrink-0 text-neutral-400 dark:text-neutral-500 group-hover/link:text-neutral-600 dark:group-hover/link:text-neutral-300" aria-hidden="true">&rarr;</span>
+								</a>
+							</li>
+			<?php if ( ! empty( $child['children'] ) && is_array( $child['children'] ) ) : ?>
+				<?php foreach ( $child['children'] as $grandchild ) : ?>
+					<?php if ( ! is_array( $grandchild ) ) : ?>
+						<?php continue; ?>
+					<?php endif; ?>
+									<li>
+										<a
+											href="<?php echo esc_url( $grandchild['href'] ); ?>"
+											<?php echo $grandchild['attrs']; ?>
+											class="<?php echo esc_attr( $link_class ); ?> group/link flex gap-3 py-0"
+											role="menuitem"
+										>
+											<span class="min-w-0">
+												<span class="block font-semibold text-neutral-900 dark:text-white"><?php echo $grandchild['label']; ?></span>
+												<?php if ( ! empty( $grandchild['description'] ) ) : ?>
+													<span class="mt-0.5 block text-neutral-500 dark:text-neutral-400"><?php echo $grandchild['description']; ?></span>
+												<?php endif; ?>
+											</span>
+											<span class="shrink-0 text-neutral-400 dark:text-neutral-500 group-hover/link:text-neutral-600 dark:group-hover/link:text-neutral-300" aria-hidden="true">&rarr;</span>
+										</a>
+									</li>
+								<?php endforeach; ?>
+							<?php endif; ?>
+						</ul>
+					</div>
+				<?php endforeach; ?>
+
+				<?php if ( $has_cta ) : ?>
+					<?php $cta = $view['mega_cta']; ?>
+					<div class="border-t border-neutral-200 dark:border-neutral-700 pt-6 md:border-t-0 md:border-l md:pl-8 md:pt-0">
+						<h3 class="font-semibold text-neutral-900 dark:text-white"><?php echo $cta['heading']; ?></h3>
+						<?php if ( $cta['text'] !== '' ) : ?>
+							<p class="mt-2 text-neutral-500 dark:text-neutral-400"><?php echo $cta['text']; ?></p>
+						<?php endif; ?>
+						<?php if ( $cta['link_text'] !== '' ) : ?>
+							<a
+								href="<?php echo esc_url( $cta['link_url'] ); ?>"
+								<?php echo $cta['attrs']; ?>
+								class="<?php echo esc_attr( $link_class ); ?> mt-3 inline-flex items-center gap-1.5 font-medium text-primary dark:text-primary-light"
+							>
+								<?php echo $cta['link_text']; ?>
+								<svg class="size-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+								</svg>
+							</a>
+						<?php endif; ?>
+					</div>
+				<?php endif; ?>
+			</div>
+		</div>
+	</div>
+</div>

package/packages/widgets/nav-compact/templates/partials/desktop-menu.php

@@ -0,0 +1,102 @@
+<?php
+/**
+ * Nav desktop menu with dropdowns or mega menu
+ *
+ * Expects: $view (menu_items, classes, submenu_style), $link_class (optional)
+ * Each item: label, href, attrs, children (array with optional children[])
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! is_array( $view ?? null ) || empty( $view['menu_items'] ) || ! is_array( $view['menu_items'] ) ) {
+	return;
+}
+
+$view['classes'] = is_array( $view['classes'] ?? null ) ? $view['classes'] : [];
+$view['classes'] = array_merge( [ 'link' => '' ], $view['classes'] );
+
+$link_class = $link_class ?? '';
+$item_class = $view['classes']['link'] . ' rounded px-3 py-2 text-base font-normal focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2';
+$dropdown_panel_class = 'sl-nav-flyout bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-2xl py-5 px-6 min-w-[20rem] max-w-[22rem]';
+$use_mega = ( $view['submenu_style'] ?? 'dropdown' ) === 'mega';
+$menu_id  = $view['menu_id'] ?? 'nav-menu';
+?>
+<ul class="flex items-center gap-x-6">
+<?php foreach ( $view['menu_items'] as $index => $item ) : ?>
+	<?php if ( ! is_array( $item ) ) : ?>
+		<?php continue; ?>
+	<?php endif; ?>
+		<?php
+		$has_children = ! empty( $item['children'] );
+		$mega_id      = $has_children && $use_mega ? $menu_id . '-mega-' . $index : '';
+		$li_attrs    = $has_children ? ' class="relative flex items-center group"' : ' class="relative flex items-center"';
+		if ( $mega_id !== '' ) {
+			$li_attrs .= ' data-mega-id="' . esc_attr( $mega_id ) . '"';
+		}
+		?>
+		<li<?php echo $li_attrs; ?>>
+			<?php if ( $has_children ) : ?>
+				<?php if ( $use_mega ) : ?>
+					<a
+						href="<?php echo esc_url( $item['href'] ); ?>"
+						<?php echo $item['attrs']; ?>
+						class="<?php echo esc_attr( $item_class . ' ' . $link_class ); ?> inline-flex items-center gap-1.5"
+						aria-haspopup="true"
+						aria-expanded="false"
+						aria-controls="<?php echo esc_attr( $mega_id ); ?>"
+					><?php echo $item['label']; ?>
+						<svg class="size-4 shrink-0 transition-transform duration-200 group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+						</svg>
+					</a>
+					<?php /* Mega panel rendered in wrapper; shown via JS when this li is hovered */ ?>
+				<?php else : ?>
+					<a
+						href="<?php echo esc_url( $item['href'] ); ?>"
+						<?php echo $item['attrs']; ?>
+						class="<?php echo esc_attr( $item_class . ' ' . $link_class ); ?> inline-flex items-center gap-1.5"
+						aria-haspopup="true"
+						aria-expanded="false"
+					><?php echo $item['label']; ?>
+						<svg class="size-4 shrink-0 transition-transform duration-200 group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+						</svg>
+					</a>
+					<div
+						class="absolute left-0 top-full z-50 pt-2 opacity-0 pointer-events-none scale-[0.98] -translate-y-1 transition-all duration-200 ease-out delay-0 group-hover:delay-75 group-hover:opacity-100 group-hover:pointer-events-auto group-hover:scale-100 group-hover:translate-y-0 group-focus-within:opacity-100 group-focus-within:pointer-events-auto group-focus-within:scale-100 group-focus-within:translate-y-0"
+						role="menu"
+					>
+						<div class="<?php echo esc_attr( $dropdown_panel_class ); ?>">
+						<?php foreach ( $item['children'] as $child ) : ?>
+							<?php if ( ! is_array( $child ) ) : ?>
+								<?php continue; ?>
+							<?php endif; ?>
+								<a
+									href="<?php echo esc_url( $child['href'] ); ?>"
+									<?php echo $child['attrs']; ?>
+									role="menuitem"
+									class="sl-nav-flyout-item block rounded-lg px-3 py-3.5 text-left no-underline transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-inset first:mt-0 mt-1 first:mt-0 border border-transparent hover:bg-neutral-100 dark:hover:bg-neutral-700/50"
+								>
+									<span class="block font-normal text-neutral-900 dark:text-white text-base"><?php echo $child['label']; ?></span>
+									<?php if ( ! empty( $child['description'] ) ) : ?>
+										<span class="block mt-1 text-sm text-neutral-600 dark:text-neutral-400 leading-snug"><?php echo $child['description']; ?></span>
+									<?php endif; ?>
+								</a>
+							<?php endforeach; ?>
+						</div>
+					</div>
+				<?php endif; ?>
+			<?php else : ?>
+				<a
+					href="<?php echo esc_url( $item['href'] ); ?>"
+					<?php echo $item['attrs']; ?>
+					class="<?php echo esc_attr( $item_class . ' ' . $link_class ); ?>"
+				><?php echo $item['label']; ?></a>
+			<?php endif; ?>
+		</li>
+	<?php endforeach; ?>
+</ul>

package/packages/widgets/nav-compact/templates/partials/mobile-menu.php

@@ -0,0 +1,104 @@
+<?php
+/**
+ * Nav mobile menu with accordion submenus
+ *
+ * Expects: $view (menu_items, classes), $menu_id for unique IDs
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( ! is_array( $view ?? null ) || empty( $view['menu_items'] ) || ! is_array( $view['menu_items'] ) ) {
+	return;
+}
+
+$view['classes'] = is_array( $view['classes'] ?? null ) ? $view['classes'] : [];
+$view['classes'] = array_merge( [ 'link' => '' ], $view['classes'] );
+
+$menu_id = $view['menu_id'] ?? 'nav-menu';
+$link_class = $view['classes']['link'] . ' block w-full rounded px-3 py-3 text-base font-medium text-left focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2';
+?>
+<ul class="flex w-full flex-col gap-1">
+<?php foreach ( $view['menu_items'] as $index => $item ) : ?>
+	<?php if ( ! is_array( $item ) ) : ?>
+		<?php continue; ?>
+	<?php endif; ?>
+		<?php
+		$has_children = ! empty( $item['children'] );
+		$submenu_id   = $menu_id . '-sub-' . $index;
+		?>
+		<li class="w-full">
+			<?php if ( $has_children ) : ?>
+				<div class="w-full" data-nav-submenu>
+					<button
+						type="button"
+						class="<?php echo esc_attr( $link_class ); ?> flex w-full items-center justify-between"
+						aria-expanded="false"
+						aria-controls="<?php echo esc_attr( $submenu_id ); ?>"
+						aria-label="<?php echo esc_attr( sprintf( __( 'Toggle submenu for %s', 'sociallane-elements' ), $item['label'] ) ); ?>"
+						data-nav-submenu-toggle
+					>
+						<span><?php echo $item['label']; ?></span>
+						<svg class="nav-submenu-chevron size-5 shrink-0 transition-transform duration-200 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+						</svg>
+					</button>
+					<div
+						id="<?php echo esc_attr( $submenu_id ); ?>"
+						class="nav-submenu-panel grid grid-rows-[0fr] overflow-hidden transition-[grid-template-rows] duration-200 ease-out"
+						aria-hidden="true"
+						data-nav-submenu-panel
+					>
+						<div class="min-h-0">
+							<ul class="flex w-full flex-col gap-0.5 border-l-2 border-neutral-200 dark:border-neutral-700 pl-4 py-2">
+							<?php foreach ( $item['children'] as $child ) : ?>
+								<?php if ( ! is_array( $child ) ) : ?>
+									<?php continue; ?>
+								<?php endif; ?>
+									<li class="w-full">
+										<?php if ( ! empty( $child['children'] ) ) : ?>
+											<a
+												href="<?php echo esc_url( $child['href'] ); ?>"
+												<?php echo $child['attrs']; ?>
+												class="<?php echo esc_attr( $view['classes']['link'] ); ?> block w-full rounded px-3 py-2 text-sm font-semibold"
+											><?php echo $child['label']; ?></a>
+											<ul class="flex w-full flex-col gap-0.5 border-l-2 border-neutral-200 dark:border-neutral-700 pl-3 ml-2 py-1 mt-0.5">
+											<?php foreach ( $child['children'] as $grandchild ) : ?>
+												<?php if ( ! is_array( $grandchild ) ) : ?>
+													<?php continue; ?>
+												<?php endif; ?>
+													<li>
+														<a
+															href="<?php echo esc_url( $grandchild['href'] ); ?>"
+															<?php echo $grandchild['attrs']; ?>
+															class="<?php echo esc_attr( $view['classes']['link'] ); ?> block w-full rounded px-3 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+														><?php echo $grandchild['label']; ?></a>
+													</li>
+												<?php endforeach; ?>
+											</ul>
+										<?php else : ?>
+											<a
+												href="<?php echo esc_url( $child['href'] ); ?>"
+												<?php echo $child['attrs']; ?>
+												class="<?php echo esc_attr( $view['classes']['link'] ); ?> block w-full rounded px-3 py-2.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+											><?php echo $child['label']; ?></a>
+										<?php endif; ?>
+									</li>
+								<?php endforeach; ?>
+							</ul>
+						</div>
+					</div>
+				</div>
+			<?php else : ?>
+				<a
+					href="<?php echo esc_url( $item['href'] ); ?>"
+					<?php echo $item['attrs']; ?>
+					class="<?php echo esc_attr( $link_class ); ?>"
+				><?php echo $item['label']; ?></a>
+			<?php endif; ?>
+		</li>
+	<?php endforeach; ?>
+</ul>