BuddyMenu
=========

*   GitHub: [BonnierNews/dn-design-system/web/src/components/buddy-menu](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/buddy-menu)
*   Storybook: [BuddyMenu](https://designsystem.dn.se/?path=/docs/page-buddymenu--docs)

The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use "@bonniernews/dn-design-system-web/components/buddy-menu/buddy-menu" as *;`

#### [](#adjust-buddy-menu-position)Adjust buddy menu position

These css variables can be overwritten to adjust the position of the buddy menu:

```javascript
--ds-buddy-menu-bottom-margin: 100px;
--ds-buddy-menu-position-top: 0;
--ds-buddy-menu-position-right: 0;
```

If we are using an (list-item) accordion in the buddy menu, we need to include the following js:

```javascript
import dsListItem from '@bonniernews/dn-design-system-web/components/list-item/list-item.js'
const listElements = Array.from(document.getElementsByClassName("ds-list-item"));
dsListItem(listElements);s
```

| Name | Description | Default |
|:--- | :--- | :--- |
| userName | Should be populated with product specific js<br />string | \- |
| links | Should be list item components<br />ComponentChildren | \- |
| accountLevel | Should be populated with product specific js<br />string | \- |
| myAccountUrl\* | Url for "Mitt konto" button<br />string | \- |
| addons | Ex. \[{ title: 'Annonsfri', href: "[https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/#Annonsfritt](https://id.dn.se/konto/?nextUrl=/vanliga-fragor/dn/#Annonsfritt)" }\]<br />{ title: string; href?: string; classNames?: string; }\[\] | \- |
| addonsClassNames | string | \- |
| isDnSkola | boolean | false |
| forcePx | Fixed pixel value is used for typography to prevent scaling based on html font-size<br />boolean | \- |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | \- |

```jsx
<BuddyMenu
  accountLevel="DN Digital"
  links={<BuddyMenuLinksArkivet />}
  myAccountUrl="https://id.dn.se/konto/"
  userName="Anna Andersson"
/>
```