@loomidev/navigation

All LoomiUI navigation components in one install.

npm install @loomidev/navigation lit

import "@loomidev/navigation"; // registers all navigation elements

| Package | | ----------------------------------------------- | | @loomidev/bottom-nav | | @loomidev/tab | | @loomidev/pagination | | @loomidev/dropmenu | | @loomidev/context-menu | | @loomidev/theme-switcher |

See the root README for the install/theming model.

Accessibility

For the library-wide baseline, see Foundations — Accessibility.

Responsive behavior

For the shared container and viewport rules, see Foundations — Responsive behavior.

Dark mode

For theme activation, token overrides, and contrast guidance, see Foundations — Dark mode.

Framework integration

@loomidev/navigation registers all LoomiUI navigation components. Use it when you want one import for a whole category instead of installing each component separately.

Where to run commands

Run install commands from the app where you want to use this bundle. That means the folder that contains that app's package.json. If you are editing LoomiUI itself, run pnpm --filter ... commands from the top-level components folder.

cd /path/to/your-app
npm install @loomidev/navigation lit

cd /path/to/your-copy-of-loomiui/components
pnpm --filter @loomidev/navigation build
pnpm --filter @loomidev/navigation typecheck

Choose your framework

<script type="importmap">
  { "imports": { "lit": "https://esm.sh/[email protected]", "lit/": "https://esm.sh/[email protected]/" } }
</script>
<script type="module" src="https://esm.sh/@loomidev/navigation"></script>

<loomi-tabs>
  <loomi-tab label="Overview" active>Overview content</loomi-tab>
  <loomi-tab label="Billing">Billing content</loomi-tab>
</loomi-tabs>

cd /path/to/your-laravel-app
npm install @loomidev/navigation lit
npm run dev

// resources/js/app.js
import "@loomidev/navigation";

<loomi-tabs>
  <loomi-tab label="Overview" active>Overview content</loomi-tab>
  <loomi-tab label="Billing">Billing content</loomi-tab>
</loomi-tabs>

import "@loomidev/navigation";

export function LoomiBundleExample() {
  return (
    <loomi-tabs>
      <loomi-tab label="Overview" active>Overview content</loomi-tab>
      <loomi-tab label="Billing">Billing content</loomi-tab>
    </loomi-tabs>
  );
}

For array or object properties such as select data or table columns, assign the value with a ref after mount when using React 18.

<script setup>
import "@loomidev/navigation";
</script>

<template>
  <loomi-tabs>
    <loomi-tab label="Overview" active>Overview content</loomi-tab>
    <loomi-tab label="Billing">Billing content</loomi-tab>
  </loomi-tabs>
</template>

Configure Vue's compilerOptions.isCustomElement for tags that start with loomi- if your tooling warns about unknown components.

import { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core";
import "@loomidev/navigation";

@Component({
  selector: "app-root",
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <loomi-tabs>
      <loomi-tab label="Overview" active>Overview content</loomi-tab>
      <loomi-tab label="Billing">Billing content</loomi-tab>
    </loomi-tabs>
  `,
})
export class AppComponent {}

<script>
  import "@loomidev/navigation";
</script>

<loomi-tabs>
  <loomi-tab label="Overview" active>Overview content</loomi-tab>
  <loomi-tab label="Billing">Billing content</loomi-tab>
</loomi-tabs>

---
import "@loomidev/navigation";
---

<loomi-tabs>
  <loomi-tab label="Overview" active>Overview content</loomi-tab>
  <loomi-tab label="Billing">Billing content</loomi-tab>
</loomi-tabs>

Server-side rendering notes

In Next.js, Nuxt, SvelteKit, and other SSR frameworks, put the bundle import in client-side code if the server build complains about browser-only APIs. The rendered HTML can still contain the <loomi-*> tags; the browser upgrades them after the JavaScript loads.

Dependencies

• @loomidev/bottom-nav
• @loomidev/command-palette
• @loomidev/context-menu
• @loomidev/dropmenu
• @loomidev/pagination
• @loomidev/tab
• @loomidev/theme-switcher