# xpl-main-nav

The Main Nav component contains is split in 3 areas. The top area is where the branding goes. It's divided into 2 slots `logo` and `brand-name`.
The middle area is where the main navigation links go. It's a `<nav>` tag with a slot named `navigation`, where a `<ul slot="navigation">` with `<xpl-nav-items>` should be rendered.

The bottom area is fixed to the bottom and should be used for actions. To render content within this area use the slot `footer` with a `<ul slot="footer">` tag.


<!-- Auto Generated Below -->


## Properties

| Property | Attribute | Description | Type                        | Default     |
| -------- | --------- | ----------- | --------------------------- | ----------- |
| `width`  | `width`   |             | `"default" \| "md" \| "sm"` | `'default'` |


## Events

| Event      | Description | Type                  |
| ---------- | ----------- | --------------------- |
| `navWidth` |             | `CustomEvent<string>` |


----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*