From 14af7be6fd6a58ef8b647809097fc05e9b9977ac Mon Sep 17 00:00:00 2001
From: Darren Burns <darrenb900@gmail.com>
Date: Tue, 4 Oct 2022 11:43:30 +0100
Subject: [PATCH] Document Header widget

---
 docs/examples/widgets/header.py | 12 ++++++++++++
 docs/reference/header.md        |  1 +
 docs/widgets/footer.md          |  2 +-
 docs/widgets/header.md          | 33 +++++++++++++++++++++++++++++++++
 mkdocs.yml                      |  1 +
 5 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 docs/examples/widgets/header.py
 create mode 100644 docs/reference/header.md

diff --git a/docs/examples/widgets/header.py b/docs/examples/widgets/header.py
new file mode 100644
index 000000000..d6617101a
--- /dev/null
+++ b/docs/examples/widgets/header.py
@@ -0,0 +1,12 @@
+from textual.app import App, ComposeResult
+from textual.widgets import Header
+
+
+class HeaderApp(App):
+    def compose(self) -> ComposeResult:
+        yield Header()
+
+
+if __name__ == "__main__":
+    app = HeaderApp()
+    app.run()
diff --git a/docs/reference/header.md b/docs/reference/header.md
new file mode 100644
index 000000000..e6cfc0e44
--- /dev/null
+++ b/docs/reference/header.md
@@ -0,0 +1 @@
+::: textual.widgets.Header
diff --git a/docs/widgets/footer.md b/docs/widgets/footer.md
index 788c8e8ab..55a9e1fa8 100644
--- a/docs/widgets/footer.md
+++ b/docs/widgets/footer.md
@@ -15,7 +15,7 @@ widget. Notice how the `Footer` automatically displays the keybind.
     ```{.textual path="docs/examples/widgets/footer.py"}
     ```
 
-=== "button.py"
+=== "footer.py"
 
     ```python
     --8<-- "docs/examples/widgets/footer.py"
diff --git a/docs/widgets/header.md b/docs/widgets/header.md
index 6c67b6a97..240d2dd52 100644
--- a/docs/widgets/header.md
+++ b/docs/widgets/header.md
@@ -1 +1,34 @@
 # Header
+
+## Description
+
+A simple header widget which docks itself to the top of the parent container.
+
+## Example
+
+The example below shows an app with a `Header`.
+
+=== "Output"
+
+    ```{.textual path="docs/examples/widgets/header.py"}
+    ```
+
+=== "header.py"
+
+    ```python
+    --8<-- "docs/examples/widgets/header.py"
+    ```
+
+## Reactive Attributes
+
+| Name   | Type   | Default | Description                                                                                                                                                                                      |
+|--------|--------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `tall` | `bool` | `True`  | Whether the `Header` widget is displayed as tall or not. The tall variant is 3 cells tall by default. The non-tall variant is a single cell tall. This can be toggled by clicking on the header. |
+
+## Messages
+
+This widget sends no messages.
+
+## See Also
+
+* [Header](../reference/header.md) code reference
diff --git a/mkdocs.yml b/mkdocs.yml
index f0f47ce7e..4ef376f2c 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -102,6 +102,7 @@ nav:
     - "reference/events.md"
     - "reference/footer.md"
     - "reference/geometry.md"
+    - "reference/header.md"
     - "reference/index.md"
     - "reference/message_pump.md"
     - "reference/message.md"