salla-menu

Renders the store's navigation menu. Use it in the theme header for the main (and mobile) menu, or in the footer for a flat list of links. Menu items are fetched from the store unless source="json" is used.

With source="header" it renders a <nav id="mobile-menu"> containing both a mobile list and a desktop list (items with children get a sub-menu, items with products get a mega menu). With source="footer" it renders a flat list of links.

Use itCopy Anchor Link

In HTML or JSX, use the tag <salla-menu> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).

import { SallaMenu } from '@salla.sa/twilight-components-react/menu';

Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

Try itCopy Anchor Link

ExampleCopy Anchor Link

import { SallaMenu } from '@salla.sa/twilight-components-react/menu';

export function Example() {
  return (
    <SallaMenu source="header" />
  );
}

import { SallaMenu } from '@salla.sa/twilight-components-react/menu';

export function Example() {
  return (
    <SallaMenu source="footer" limit={5} />
  );
}

import { SallaMenu } from '@salla.sa/twilight-components-react/menu';

export function Example() {
  return (
    <SallaMenu source="json" sourceValue='[{"id":1,"title":"Offers","url":"/offers","children":[],"attrs":"","link_attrs":""}]' />
  );
}

PropertiesCopy Anchor Link

RelatedCopy Anchor Link

Renders: <salla-products-list>.