Up to now, I have shown how to get started with Hyprland with the initial configurations.
Now, I’ll show how to install the mainstream status bar in Hyprland: Waybar. Again, I’m going to do that for Arch Linux. As in the previous posts, I will NOT focus on the look and feel configuration.
Before continuing, the Waybar module for keyboard status (Caps lock and Num lock) requires the user to be part of the “input” group. Ensure your user is part of that group by running “groups”. If not, then add it with
1 |
sudo usermod -aG input $USER |
Then, you must log out and log in.
First of all, the official package waybar already supports Hyprland (in the past, you had to install an AUR package). So, let’s install the main packages (as usual, you might want to make sure your packages are up-to-date before going on):
1 |
sudo pacman -S waybar |
Let’s open a terminal and start Waybar
1 |
waybar & |
The result is not that good-looking
Waybar heavily relies on Nerd fonts for icons, and, currently, we don’t have any installed (unless you have already installed a few yourself).
The terminal will also be filled with a few warnings about a few missing things (related to Sway) and errors about failures to connect to MPD.
Let’s quit Waybar (close the terminal from where you launched it), and let’s fix the font problem by installing a few font packages:
1 |
sudo pacman -S otf-font-awesome ttf-arimo-nerd noto-fonts |
Let’s start Waybar again, and this time it looks better:
Try to click on the modules and see what happens. For some of them, the information shown will change (e.g., the time will turn into the date).
Let’s quit Waybar again, and let’s start configuring it. We must create the configuration files for Waybar (by default, they are searched for in “~/.config/waybar”). We can do that by using the default ones:
1 2 |
mkdir -p ~/.config/waybar cp /etc/xdg/waybar/* ~/.config/waybar/ |
The above command will copy “config” (with the configuration of Waybar modules, i.e., the “boxes” shown in the bar; The configuration uses the JSON file format) and style.css (for the style).
Let’s edit “config”. At the time of writing, this is the initial part of the configuration file:
1 2 3 4 5 6 7 8 9 10 11 12 |
{ // "layer": "top", // Waybar at top layer // "position": "bottom", // Waybar position (top|bottom|left|right) "height": 30, // Waybar height (to be removed for auto height) // "width": 1280, // Waybar width "spacing": 4, // Gaps between modules (4px) // Choose the order of the modules "modules-left": ["sway/workspaces", "sway/mode", "sway/scratchpad", "custom/media"], "modules-center": ["sway/window"], "modules-right": ["mpd", "idle_inhibitor", "pulseaudio", "network", "cpu", "memory", "temperature", "backlight", "keyboard-state", "sway/language", "battery", "battery#bat2", "clock", "tray"], // Modules configuration ... |
The initial parts specify the position and other main configurations. This part must be enabled:
1 |
"layer": "top", |
Otherwise, Waybar popups render behind the windows
Let’s edit the modules that must be shown on the bar’s left, center, and right. Of course, this is subjective; here, I show a few examples. The modules starting with “sway” are for the Sway Window Manager, while we’re using Hyprland, and we must use the corresponding ones:
1 2 3 |
"modules-left": ["hyprland/workspaces", "cpu", "memory", "temperature", "disk"], "modules-center": ["hyprland/window"], "modules-right": ["idle_inhibitor", "pulseaudio", "backlight", "battery", "clock", "keyboard-state", "tray"], |
You might want to have a look at the Waybar Wiki for an explanation of the modules.
Remember that for each module you mention here, you can have a configuration in the rest of the file, e.g.:
1 2 3 4 5 6 7 8 9 |
"tray": { // "icon-size": 21, "spacing": 10 }, "clock": { // "timezone": "America/New_York", "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>", "format-alt": "{:%Y-%m-%d}" }, |
Otherwise, you get the defaults for that module.
Each module, together with its configuration, is documented in the Waybar Wiki.
Let’s focus on the left and center modules. I’ve opened three workspaces, and here’s the result (note the workspace indicator on the left, and on the center, we see the currently focused window’s title, in this case, Firefox):
By editing the “style.css” file, we can change the workspace indicator so that we better highlight the current workspace:
1 2 3 4 |
#workspaces button.active { background-color: green; box-shadow: inset 0 -3px #ffffff; } |
Restart Waybar, and now the current workspace is well distinguished:
The “tray” module is useful to show applications running in the background, like “skype”, “dropbox,” or the “network-manager-applet”.
Let’s now define a custom module, for example, one for showing a menu for locking the screen, logging out, rebooting, etc. To do that, first, we need to install the AUR package “wlogout”:
1 |
yay -S wlogout |
Let’s say we want to add it as the last module on the right. We edit the Waybar config file like this:
1 |
"modules-right": ... as before ... , "custom/power"], |
Then, in the same file, before closing the last JSON element, we define such a module (remember to add a comma after the previously existing last module):
1 2 3 4 5 6 7 8 |
... }, "custom/power": { "format": " ⏻ ", "tooltip": false, "on-click": "wlogout --protocol layer-shell" } } |
Note that I’ve used a character using the installed Nerd font. Of course, you can choose anything you like. The “wlogout” menu will appear when you click on that module. Let’s restart Waybar and verify that:
By editing the “style.css”, you can customize the style of this custom module, e.g.,
1 2 3 |
#custom-power { background-color: #ffa000; } |
When we’re happy with the configuration, we modify the Hyprland configuration file to start Waybar automatically when we enter Hyprland:
1 |
exec-once = waybar |
Restart Hyprland and Waybar will now appear automatically.
Finally, you can have several Waybar bars, i.e., instances, in different parts of the screen, each one with a different configuration.
For example, let’s create another Waybar configuration for showing a Taskbar to show all the running applications from all workspaces. This can be useful to quickly look at all the running applications and quickly switch to any of them, especially in the presence of many workspaces.
I create another configuration file in the “~/.config/waybar” directory, e.g., “config-taskbar”, with these contents (you could also configure several Waybar instances in the same configuration file, but I prefer to have one configuration file for each instance):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{ "layer": "top", // Waybar at top layer "position": "bottom", // Waybar position (top|bottom|left|right) "height": 30, // Waybar height (to be removed for auto height) // "width": 1280, // Waybar width "spacing": 4, // Gaps between modules (4px) // Choose the order of the modules "modules-center": ["wlr/taskbar"], // Modules configuration "wlr/taskbar": { "format": "{icon}", "icon-size": 16, //"icon-theme": "Numix-Circle", "tooltip-format": "{title}", "on-click": "activate", "on-click-middle": "close" } } |
We can call it from the command line as follows:
1 |
waybar --config ~/.config/waybar/config-taskbar |
Here’s the second instance of Waybar on the bottom, showing all the running applications (from all the workspaces):
Unfortunately, in my experience, not all icons for all running applications are correctly shown: for example, for “nemo”, you get an empty icon in the taskbar. You can click it, but visually, you don’t see that… maybe it has something to do with the icon set. I still have to investigate.
You can run both instances when Hyprland starts by putting these two lines in the “hyprland.conf” file:
1 2 |
exec-once = waybar exec-once = waybar --config ~/.config/waybar/config-taskbar |
Stay tuned for more posts about Hyprland. 🙂
Pingback: Hyprland and wlogout | Lorenzo Bettini
Very well written: clear explanations and – most of all – functioning scripts!
Congrats from Milan! 😉
Grazie! 🙂
Glad it helped!
Good read.
I love your articles! The on-click activate is currently broken in wlr/taskbar though. Looks like a new bug.
Thank you for the kind words! 🙂
Yes, that’s a new bug: I’ve already reported that: https://github.com/hyprwm/Hyprland/issues/6236
Looks like it’s fixed in Git, but I haven’t tried that… let’s see in the next release
Awesome! It’s definitely something I would like to have, feels like its the one thing missing from my setup. I’m not brave enough to use the -git versions of most software though so hopefully the next release isn’t too far away.
Lorenzo. I am having trouble with consistently applying window rules (size move border) to windows. I am successful with Nemo, Geary, Kitty, and others. But, I am unsuccessful with gnome-calendar, Chromium, gnome-characters, and others. Of course, I try using the successful coding of Nemo, Geary, Kitty, etc. Could you give me some insight for the inconsistencies? Respectfully, Mark
You must be sure of the part of the window you use for the rule, e.g., title, class, etc.
To check what the correct value is, run the program you want to define the rule for, and then run “hyprctl clients”; this will give you all the needed information.