LinuxHyprland

9 Juli 2025

Konfigurasi Waybar di Hyprland Part 1.

5 min read

Dekstop Tambah Keren - Konfigurasi Waybar di Hyprland Part 1

Dalam Blog Ini

I use Arch, Btw. Hello teman-teman. Saya perdi, disini kita akan coba lanjut konfigurasi hyprland kita supaya semakin keren. Tapi sekarang kita tinggalkan dulu sejenak folder hyprland kita. Karena kali ini kita akan coba konfigurasi bar di dekstop dengan menggunakan waybar. Teman-teman bisa terlebih dahulu baca dokumentasi langsung dari waybar di link berikut: Klink link ini

Instalasi Waybar

Pertama untuk memulai konfigurasi kita butuh package-nya terinstal di dekstop atau laptop. So, kita bisa install waybar langsung dengan perintah berikut di terminal:

sudo pacman -S waybar

or 

yay -S waybar

Konfigurasi Waybar

Konfigurasi wayland dapat dilakukan pada file config yang ada pada folder ~/.confgi/waybar/config.jsonc atau jika belum ada foldernya bisa kita buat sendiri.

mkdir -p ~/.config/waybar

# Kemudian

touch ~/.config/waybar/config.jsonc

Setelah itu, mari kita mulai ricingnya…, ini hasil akhir yang akan kita tuju: Gambar Waybar Konfigurasi - Perdidev

Konfigurasi Utama

Konfigurasi waybar terdiri dari dua file. Pertama untuk strukturnya. Kemudian kedua file untuk style nya yang kita akan buat nantinya. Jadi kayak html sama css yah teman-teman.

{
	"layer": "top",
    "modules-left": ["user", "hyprland/workspaces", "tray", "privacy"],
    "modules-center": ["clock"],
    "modules-right": ["group/system", "group/setting", "group/power"],
    "spacing": 8,
    "margin-left": 12,
    "margin-right": 12,
    "margin-top": 8,
}
  • Layer, untuk menentukan bar nya berada dilayer mana. Supaya memastikan waybar nya kelihatan kita buat layernya jadi top. Ini bukan posisi barnya, untuk posisi barnya tidak saya atur karena defaultnya sudah diatas dan itu sudah sesuai dengan yang saya inginkan.
  • Module, ini untuk kasih tau module apa saja yang akan kita munculkan.
  • Spacing, supaya antar modul memiliki jarak.
  • Margin, untuk kasih jarak ke bagian paling luar. Kalua teman-teman liat ada 3 letak modul yang perlu ditentukan, yaitu left, center, dan right. Dimana pada konfigurasi saya ada beberapa module yang muncul pada masing-masing posisi tersebut:
  1. Module Left: Saya ingin menampilkan user dan workspace. Serta tray dan privacy yah (Muncul untuk keadaan tertentu).
  2. Module Center: Karena sebelumnya saya menggunakan gnome, oleh karenanya konfigurasi yang saya buat miripkan dengan gnome. Calender saya simpan di tengah.
  3. Module Right: Di kanan waybar, saya tampilkan module group yang akan kita tentukan nanti.

User

# Simpan dibawah konfigurasi utama
"user": {
	"format": "󰣇 {user} ({up_H}:{up_M})",
	"interval": 15,
	"height": 30,
	"width": 30,
	"icon": true,
	"open-on-click": true
},

Workspace

"hyprland/workspaces": {
	"format": "{icon}",
	"on-click": "activate",
	"persistent-workspaces": {"*": 4},
	"format-icons": {
		"1": "",
		"2": "",
		"3": "",
		"4": "",
		"urgent": "",
		"default": ""
	},
	"sort-by-number": true
}

Tray

"tray": {
	"icon-size": 17,
	"spacing": 6
}

Clock

"clock": {
	"interval": 60,
	"format": "{:%a, %d %b  %H:%M}",
	"format-alt": "{:%H:%M}",
	"tooltip": false,
	"calender": {
		"mode": "month"
	}
},

Group System

"group/system": {
	"orientation": "inherit",
	"modules": ["cpu", "memory", "battery"]
},

"battery": {
	"interval": 3,
	"format": "{icon} {capacity}%",
	"format-charging": " {icon} {capacity}%",
	"format-plugged": " {icon} {capacity}%",
	"format-nobattery": " {icon} {capacity}%",
	"format-icons": ["", "", "", "", ""],
	"format-time": "{H}:{m}",
	"format-tooltip": " {timeTo} | {health}",
	"states": {
		"warning": 20,
		"critical": 10,
		"nobattery": 0
	},
	"max-length": 25
},
"cpu": {
	"interval": 3,
	"format": " {usage}%",
	"max-length": 10
},
"memory": {
	"interval": 3,
	"format": " {used:0.1f}G/{total:0.1f}G",
	"tooltip-format": "{percentage}% main used. {swapPercentage} swap used."
},

Group Expand

"group/expand": {
	"orientation": "inherit",
	"drawer": {
		"transition-duration": 300,
		"children-class": "no-expand",
		"transition-left-to-right": true
	},
	"modules": ["custom/expand", "wireplumber", "backlight", "bluetooth"]
},
"custom/expand": {
	"format": "",
	"tooltip": false
},
"wireplumber": {
	"format": "{icon} {volume}%",
	"format-muted": "",
	"format-icons": ["", "", ""]
},
"backlight": {
	"format": "{icon} {percent}%",
	"format-icons": ["", ""]
},
"bluetooth": {
	"interval": 3,
	"format": "",
	"format-on": "",
	"format-off": "󰂲",
	"format-disabled": "󰂲",
	"tooltip-format": "{controller_alias} ({num_connections} connected)",
	"tooltip-format-connected": "{controller_alias}\t{num_connections} connected\n\n{device_enumerate}",
	"tooltip-format-enumerate-connected-battery": "{device_alias}\t{device_battery_percentage}%",
	"on-click": "$HOME/.config/waybar/scripts/toggle_bluetooth.sh"
},

Group Setting

"group/setting": {
	"orientation": "inherit",
	"modules": ["group/expand", "network"]
},
"network": {
	"interval": 3,
	"format": "{ifname}",
	"format-wifi": "  {signalStrength}%",
	"format-disconnected": "",
	"format-disabled": "󰪎",
	"tooltip-format": "{ifname} via {gwaddr} 󰊗",
	"tooltip-format-wifi": "{essid} ({signalStrength}%) ",
	"tooltip-format-disconnected": "Disconnected",
	"on-click": "$HOME/.config/waybar/scripts/toggle_wifi.sh"
}

Group Power

"group/power": {
	"orientation": "inherit",
	"drawer": {
		"transition-duration": 100,
		"children-class": "not-power",
		"transition-left-to-right": false
	},
	"modules": [
		"custom/power", // First element is the "group leader" and won't ever be hidden
		"custom/quit",
		"custom/lock",
		"custom/reboot"
	]
},
"custom/quit": {
	"format": "󰗼",
	"tooltip": false,
	"on-click": "hyprctl dispatch exit"
},
"custom/lock": {
	"format": "󰍁",
	"tooltip": false,
	"on-click": "hyprlock"
},
"custom/reboot": {
	"format": "󰜉",
	"tooltip": false,
	"on-click": "reboot"
},
"custom/power": {
	"format": "",
	"tooltip": false,
	"on-click": "shutdown now"
}

Privacy

"privacy": {
	"icon-spacing": 4,
	"icon-size": 18,
	"transition-duration": 250,
	"modules": [
		{
			"type": "screenshare",
			"tooltip": true,
			"tooltip-icon-size": 24
		},
		{
			"type": "audio-out",
			"tooltip": true,
			"tooltip-icon-size": 24
		},
		{
			"type": "audio-in",
			"tooltip": true,
			"tooltip-icon-size": 24
		}
	],
	"ignore-monitor": true,
	"ignore": [
		{
			"type": "audio-in",
			"name": "cava"
		},
		{
			"type": "screenshare",
			"name": "obs"
		}
	]
},

Penutup

Agar waybar langsung jalan ketika hyprland muncul, maka waktunya teman-teman untuk menambahkan waybar di konfigurasi autostart di hyprland.

# ~/.config/conf/autostart.app

exec-once = hyprpaper & waybar

Note

Icon yang saya tulis di konfigurasi diatas tidak nampak karena fontnya tidak mendukung untuk itu. Jadi teman-teman bisa langsung download konfigurasi saya di github berikut: Link Github

Next, kita lanjut untuk styling waybar nya yah…

Other blog