diff --git a/docs/_imgs/custom-power-menu.png b/docs/_imgs/custom-power-menu.png
new file mode 100644
index 0000000..b90c9b4
Binary files /dev/null and b/docs/_imgs/custom-power-menu.png differ
diff --git a/docs/examples/custom/Power-Menu.md b/docs/examples/custom/Power-Menu.md
new file mode 100644
index 0000000..9ec4051
--- /dev/null
+++ b/docs/examples/custom/Power-Menu.md
@@ -0,0 +1,230 @@
+Creates a button on the bar, which opens a popup. The popup contains a header, shutdown button, restart button, and uptime.
+
+
+
+## Configuration
+
+
+JSON
+
+```json
+{
+ "end": [
+ {
+ "type": "clock"
+ },
+ {
+ "bar": [
+ {
+ "on_click": "popup:toggle",
+ "label": "",
+ "name": "power-btn",
+ "type": "button"
+ }
+ ],
+ "class": "power-menu",
+ "popup": [
+ {
+ "orientation": "vertical",
+ "type": "box",
+ "widgets": [
+ {
+ "label": "Power menu",
+ "name": "header",
+ "type": "label"
+ },
+ {
+ "type": "box",
+ "widgets": [
+ {
+ "class": "power-btn",
+ "on_click": "!shutdown now",
+ "label": "",
+ "type": "button"
+ },
+ {
+ "class": "power-btn",
+ "on_click": "!reboot",
+ "label": "",
+ "type": "button"
+ }
+ ]
+ },
+ {
+ "label": "Up: {{30000:uptime -p | cut -d ' ' -f2-}}",
+ "name": "uptime",
+ "type": "label"
+ }
+ ]
+ }
+ ],
+ "type": "custom"
+ }
+ ]
+}
+```
+
+
+
+
+TOML
+
+```toml
+[[end]]
+type = 'clock'
+
+[[end]]
+class = 'power-menu'
+type = 'custom'
+
+[[end.bar]]
+on_click = 'popup:toggle'
+label = ''
+name = 'power-btn'
+type = 'button'
+
+[[end.popup]]
+orientation = 'vertical'
+type = 'box'
+
+[[end.popup.widgets]]
+label = 'Power menu'
+name = 'header'
+type = 'label'
+
+[[end.popup.widgets]]
+type = 'box'
+
+[[end.popup.widgets.widgets]]
+class = 'power-btn'
+on_click = '!shutdown now'
+label = ''''''
+type = 'button'
+
+[[end.popup.widgets.widgets]]
+class = 'power-btn'
+on_click = '!reboot'
+label = ''''''
+type = 'button'
+
+[[end.popup.widgets]]
+label = '''Up: {{30000:uptime -p | cut -d ' ' -f2-}}'''
+name = 'uptime'
+type = 'label'
+```
+
+
+
+
+YAML
+
+```yaml
+end:
+- type: clock
+- bar:
+ - on_click: popup:toggle
+ label:
+ name: power-btn
+ type: button
+ class: power-menu
+ popup:
+ - orientation: vertical
+ type: box
+ widgets:
+ - label: Power menu
+ name: header
+ type: label
+ - type: box
+ widgets:
+ - class: power-btn
+ on_click: '!shutdown now'
+ label:
+ type: button
+ - class: power-btn
+ on_click: '!reboot'
+ label:
+ type: button
+ - label: 'Up: {{30000:uptime -p | cut -d '' '' -f2-}}'
+ name: uptime
+ type: label
+ type: custom
+```
+
+
+
+
+Corn
+
+```corn
+let {
+ $power_menu = {
+ type = "custom"
+ class = "power-menu"
+
+ bar = [ { type = "button" name="power-btn" label = "" on_click = "popup:toggle" } ]
+
+ popup = [ {
+ type = "box"
+ orientation = "vertical"
+ widgets = [
+ { type = "label" name = "header" label = "Power menu" }
+ {
+ type = "box"
+ widgets = [
+ { type = "button" class="power-btn" label = "" on_click = "!shutdown now" }
+ { type = "button" class="power-btn" label = "" on_click = "!reboot" }
+ ]
+ }
+ { type = "label" name = "uptime" label = "Up: {{30000:uptime -p | cut -d ' ' -f2-}}" }
+ ]
+ } ]
+ }
+} in {
+ end = [ $power_menu ]
+}
+```
+
+
+## Styling
+
+```css
+.power-menu {
+ margin-left: 10px;
+}
+
+.power-menu #power-btn {
+ color: white;
+ background-color: #2d2d2d;
+}
+
+.power-menu #power-btn:hover {
+ background-color: #1c1c1c;
+}
+
+.popup-power-menu {
+ padding: 1em;
+}
+
+.popup-power-menu #header {
+ color: white;
+ font-size: 1.4em;
+ border-bottom: 1px solid white;
+ padding-bottom: 0.4em;
+ margin-bottom: 0.8em;
+}
+
+.popup-power-menu .power-btn {
+ color: white;
+ background-color: #2d2d2d;
+ border: 1px solid white;
+ padding: 0.6em 1em;
+}
+
+.popup-power-menu .power-btn + .power-btn {
+ margin-left: 1em;
+}
+
+.popup-power-menu .power-btn:hover {
+ background-color: #1c1c1c;
+}
+```
\ No newline at end of file
diff --git a/examples/config.corn b/examples/config.corn
index 677d6f8..cd293e9 100644
--- a/examples/config.corn
+++ b/examples/config.corn
@@ -60,11 +60,11 @@ let {
{
type = "box"
widgets = [
- { type = "button" class="power-btn" label = "" on_click = "!shutdown now" }
- { type = "button" class="power-btn" label = "" on_click = "!reboot" }
+ { type = "button" class="power-btn" label = "" on_click = "!shutdown now" }
+ { type = "button" class="power-btn" label = "" on_click = "!reboot" }
]
}
- { type = "label" name = "uptime" label = "Uptime: {{30000:uptime -p | cut -d ' ' -f2-}}" }
+ { type = "label" name = "uptime" label = "Up: {{30000:uptime -p | cut -d ' ' -f2-}}" }
]
} ]
}