# xpl-utility-bar

The utility bar is a top navigation bar. It contains 2 slots:

`<slot name="main"></slot>`

- appears on the left side of the bar
- items are justified to the start

`<slot name="aside"></slot>`

- appears on the right side of the bar
- items are justified to the end

The utility bar can have navigation items in just one or both slots.
To add content to the slots, just create a `<ul>` tag and target the desired slot:

`<ul slot="main">...</ul>`

`<ul slot="aside">...</ul>`

<!-- Auto Generated Below -->


## Properties

| Property             | Attribute                | Description | Type      | Default     |
| -------------------- | ------------------------ | ----------- | --------- | ----------- |
| `isNavOpenAtStartup` | `is-nav-open-at-startup` |             | `boolean` | `undefined` |
| `navControl`         | `nav-control`            |             | `boolean` | `undefined` |


## Events

| Event     | Description | Type                   |
| --------- | ----------- | ---------------------- |
| `navOpen` |             | `CustomEvent<boolean>` |


## Dependencies

### Depends on

- [xpl-icon](../xpl-icon)

### Graph
```mermaid
graph TD;
  xpl-utility-bar --> xpl-icon
  style xpl-utility-bar fill:#f9f,stroke:#333,stroke-width:4px
```

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

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