**Note:** When first loading this page, the `focus-visible` styles applied to the `sd-menu-item` component will be visible. This is a browser specific behaviour. After you interact with the page, the correct styles will be displayed. This is only happening when the `sd-menu` is rendered in isolation, if rendered inside a `sd-dropdown` it will not happen.
/
export default {
tags: ['!dev', 'autodocs'],
title: 'Components/sd-menu',
component: 'sd-menu',
args: overrideArgs([
{
type: 'slot',
name: 'default',
value: `
Menu item 1
Menu item 2
Menu item 3`
}
]),
argTypes,
parameters: {
...parameters,
design: {
type: 'figma',
url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Solid-DS-%E2%80%93-Component-Docs?node-id=15967-5252&t=ZM8naV6M5izZj27w-0'
}
},
decorators: [
(story: any) =>
html`
${story()}`
] as unknown
};
export const Default = {
render: (args: any) => {
return html`
Menu
${generateTemplate({
args
})}
`;
}
};
/**
Use the `icon-indent` slot to add system icons.
```html
Menu item 1
Menu item 2
Menu item 3
```