---
obj: application
repo: https://github.com/Alexays/Waybar
---

# Waybar
Highly customizable Wayland bar for Sway, [hyprland](../desktops/hyprland.md) and Wlroots based compositors.

![Screenshot](./waybar.avif)

## Configuration
The configuration uses the [JSON](../../files/JSON.md) file format and is named `config`.

Valid directories for this file are:
- `~/.config/waybar/`
- `~/waybar/`
- `/etc/xdg/waybar/`

A good starting point is the [default config](https://github.com/Alexays/Waybar/blob/master/resources/config).

### Bar Config

| option                              | typeof  | default  | description                                                                                                                                                                                                                                                                                                                                                                                                                           |
| ----------------------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `layer`                             | string  | `bottom` | Decide if the bar is displayed in front (`top`) of the windows or behind (`bottom`) them.                                                                                                                                                                                                                                                                                                                                             |
| `output`                            | string  | array    |                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `position`                          | string  | `top`    | Bar position, can be `top`,`bottom`,`left`,`right`.                                                                                                                                                                                                                                                                                                                                                                                   |
| `height`                            | integer |          | Height to be used by the bar if possible, leave blank for a dynamic value.                                                                                                                                                                                                                                                                                                                                                            |
| `width`                             | integer |          | Width to be used by the bar if possible, leave blank for a dynamic value.                                                                                                                                                                                                                                                                                                                                                             |
| `modules-left`                      | array   |          | Modules that will be displayed on the left.                                                                                                                                                                                                                                                                                                                                                                                           |
| `modules-center`                    | array   |          | Modules that will be displayed in the center.                                                                                                                                                                                                                                                                                                                                                                                         |
| `modules-right`                     | array   |          | Modules that will be displayed on the right.                                                                                                                                                                                                                                                                                                                                                                                          |
| `margin`                            | string  |          | Margins value using the css format without units.                                                                                                                                                                                                                                                                                                                                                                                     |
| `margin-<top\|left\|bottom\|right>` | integer |          | Margins value without units.                                                                                                                                                                                                                                                                                                                                                                                                          |
| `spacing`                           | integer | `4`      | Size of gaps in between of the different modules.                                                                                                                                                                                                                                                                                                                                                                                     |
| `name`                              | string  |          | Optional name added as a CSS class, for styling multiple waybars.                                                                                                                                                                                                                                                                                                                                                                     |
| `mode`                              | string  |          | Selects one of the preconfigured display modes. This is an equivalent of the [`sway-bar(5)`](https://github.com/swaywm/sway/blob/master/sway/sway-bar.5.scd) `mode` command and supports the same values: `dock`, `hide`, `invisible`, `overlay`.  <br>Note: `hide` and `invisible` modes may be not as useful without Sway IPC.                                                                                                      |
| `start_hidden`                      | bool    | `false`  | Option to start the bar hidden.                                                                                                                                                                                                                                                                                                                                                                                                       |
| `modifier-reset`                    | string  | `press`  | Defines the timing of modifier key to reset the bar visibility. To reset the visibility of the bar with the press of the modifier key use `press`. Use `release` to reset the visibility upon the release of the modifier key and only if no other action happened while the key was pressed. This prevents hiding the bar when the modifier is used to switch a workspace, change binding mode or start a keybinding.                |
| `exclusive`                         | bool    | `true`   | Option to request an exclusive zone from the compositor. Disable this to allow drawing application windows underneath or on top of the bar.  <br>Disabled by default for `overlay` layer.                                                                                                                                                                                                                                             |
| `fixed-center`                      | bool    | `true`   | Prefer fixed center position for the `modules-center` block. The center block will stay in the middle of the bar whenever possible. It can still be pushed around if other blocks need more space.  <br>When false, the center block is centered in the space between the left and right block.                                                                                                                                       |
| `passthrough`                       | bool    | `false`  | Option to pass any pointer events to the window under the bar.  <br>Intended to be used with either `top` or `overlay` layers and without exclusive zone.  <br>Enabled by default for `overlay` layer.                                                                                                                                                                                                                                |
| `gtk-layer-shell`                   | bool    | `true`   | Option to disable the use of gtk-layer-shell for popups. Only functional if compiled with gtk-layer-shell support.                                                                                                                                                                                                                                                                                                                    |
| `ipc`                               | bool    | `false`  | Option to subscribe to the Sway IPC bar configuration and visibility events and control waybar with `swaymsg bar` commands.  <br>Requires `bar_id` value from sway configuration to be either passed with the `-b` commandline argument or specified with the `id` option.  <br>See [#1244](https://github.com/Alexays/Waybar/pull/1244) for the documentation and configuration examples.                                            |
| `id`                                | string  |          | `bar_id` for the Sway IPC. Use this if you need to override the value passed with the `-b bar_id` commandline argument for the specific bar instance.                                                                                                                                                                                                                                                                                 |
| `include`                           | array   |          | Paths to additional configuration files.  <br>Each file can contain a single object with any of the bar configuration options. In case of duplicate options, the first defined value takes precedence, i.e. including file -> first included file -> etc. Nested includes are permitted, but make sure to avoid circular imports.  <br>For a multi-bar config, the `include` directive affects only current bar configuration object. | 

### Multiple instances of a module
If you want to have a second instance of a module, you can suffix it by a '#' and a custom name.

For example if you want a second battery module, you can add `"battery#bat2"` to your modules.

To configure the newly added module, you then also add a module configuration with the same name.

This could then look something like this _(this is an incomplete example)_:
```js
"modules-right": ["battery", "battery#bat2"],
"battery": {
    "bat": "BAT1"
},
"battery#bat2": {
    "bat": "BAT2"
}
```

To style in `styles.css` use :
```css
battery.bat2 {
    border-bottom: 2px solid #FFFFFF;
}
```

## Styling
Styling is done using the CSS file format and with a file named `style.css`.

Valid directories for this file are:
- `~/.config/waybar/`
- `~/waybar/`
- `/etc/xdg/waybar/`

A good starting point is the [default style](https://github.com/Alexays/Waybar/blob/master/resources/style.css).

## Modules
- [Battery](https://github.com/Alexays/Waybar/wiki/Module:-Battery)
- [Bluetooth](https://github.com/Alexays/Waybar/wiki/Module:-Bluetooth)
- [Clock](https://github.com/Alexays/Waybar/wiki/Module:-Clock)
- [CPU](https://github.com/Alexays/Waybar/wiki/Module:-CPU)
- [Custom](https://github.com/Alexays/Waybar/wiki/Module:-Custom)
- [Disk](https://github.com/Alexays/Waybar/wiki/Module:-Disk)
- [Group](https://github.com/Alexays/Waybar/wiki/Module:-Group)
- [Hyprland](https://github.com/Alexays/Waybar/wiki/Module:-Hyprland)
- [Image](https://github.com/Alexays/Waybar/wiki/Module:-Image)
- [Memory](https://github.com/Alexays/Waybar/wiki/Module:-Memory)
- [Network](https://github.com/Alexays/Waybar/wiki/Module:-Network)
- [Temperature](https://github.com/Alexays/Waybar/wiki/Module:-Temperature)
- [Taskbar](https://github.com/Alexays/Waybar/wiki/Module:-Taskbar)
