diff --git a/controllers/HTMLController.php b/controllers/HTMLController.php
index d03bc508..a5d5236b 100644
--- a/controllers/HTMLController.php
+++ b/controllers/HTMLController.php
@@ -22,8 +22,6 @@ abstract class HTMLController
 		if (Registry::get('user')->isAdmin())
 		{
 			$this->page->appendStylesheet(BASEURL . '/css/admin.css');
-			$this->admin_bar = new AdminBar();
-			$this->page->adopt($this->admin_bar);
 		}
 	}
 
diff --git a/models/AdminMenu.php b/models/AdminMenu.php
new file mode 100644
index 00000000..aae9e0d0
--- /dev/null
+++ b/models/AdminMenu.php
@@ -0,0 +1,58 @@
+<?php
+/*****************************************************************************
+ * AdminMenu.php
+ * Contains the admin navigation logic.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
+ *****************************************************************************/
+
+class AdminMenu extends Menu
+{
+	public function __construct()
+	{
+		$user = Registry::has('user') ? Registry::get('user') : new Guest();
+		if (!$user->isAdmin())
+			return;
+
+		$this->items[] = [
+			'label' => 'Admin',
+			'icon' => 'gear',
+			'subs' => [
+				[
+					'uri' => '/managealbums/',
+					'label' => 'Albums',
+				],
+				[
+					'uri' => '/manageassets/',
+					'label' => 'Assets',
+				],
+				[
+					'uri' => '/managetags/',
+					'label' => 'Tags',
+				],
+				[
+					'uri' => '/manageusers/',
+					'label' => 'Users',
+				],
+				[
+					'uri' => '/manageerrors/',
+					'label' => 'Errors',
+					'badge' => ErrorLog::getCount(),
+				],
+			],
+		];
+
+		foreach ($this->items as $i => $item)
+		{
+			if (isset($item['uri']))
+				$this->items[$i]['url'] = BASEURL . $item['uri'];
+
+			if (!isset($item['subs']))
+				continue;
+
+			foreach ($item['subs'] as $j => $subitem)
+				$this->items[$i]['subs'][$j]['url'] = BASEURL . $subitem['uri'];
+		}
+	}
+}
diff --git a/models/Dispatcher.php b/models/Dispatcher.php
index 82807975..3a6b529e 100644
--- a/models/Dispatcher.php
+++ b/models/Dispatcher.php
@@ -86,7 +86,6 @@ class Dispatcher
 		if (Registry::has('user') && Registry::get('user')->isAdmin())
 		{
 			$page->appendStylesheet(BASEURL . '/css/admin.css');
-			$page->adopt(new AdminBar());
 		}
 
 		$page->adopt(new DummyBox('Well, this is a bit embarrassing!', '<p>The page you requested could not be found. Don\'t worry, it\'s probably not your fault. You\'re welcome to browse the website, though!</p>', 'errormsg'));
diff --git a/models/ErrorHandler.php b/models/ErrorHandler.php
index da650e93..3139444a 100644
--- a/models/ErrorHandler.php
+++ b/models/ErrorHandler.php
@@ -168,7 +168,6 @@ class ErrorHandler
 			if ($is_admin)
 			{
 				$page->appendStylesheet(BASEURL . '/css/admin.css');
-				$page->adopt(new AdminBar());
 			}
 		}
 		elseif (!$is_sensitive)
diff --git a/models/MainMenu.php b/models/MainMenu.php
new file mode 100644
index 00000000..e1ccb05d
--- /dev/null
+++ b/models/MainMenu.php
@@ -0,0 +1,41 @@
+<?php
+/*****************************************************************************
+ * MainMenu.php
+ * Contains the main navigation logic.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
+ *****************************************************************************/
+
+class MainMenu extends Menu
+{
+	public function __construct()
+	{
+		$this->items = [
+			[
+				'uri' => '/',
+				'label' => 'Albums',
+			],
+			[
+				'uri' => '/people/',
+				'label' => 'People',
+			],
+			[
+				'uri' => '/timeline/',
+				'label' => 'Timeline',
+			],
+		];
+
+		foreach ($this->items as $i => $item)
+		{
+			if (isset($item['uri']))
+				$this->items[$i]['url'] = BASEURL . $item['uri'];
+
+			if (!isset($item['subs']))
+				continue;
+
+			foreach ($item['subs'] as $j => $subitem)
+				$this->items[$i]['subs'][$j]['url'] = BASEURL . $subitem['uri'];
+		}
+	}
+}
diff --git a/models/Menu.php b/models/Menu.php
new file mode 100644
index 00000000..cde4de0e
--- /dev/null
+++ b/models/Menu.php
@@ -0,0 +1,18 @@
+<?php
+/*****************************************************************************
+ * Menu.php
+ * Contains all navigational menus.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
+ *****************************************************************************/
+
+abstract class Menu
+{
+	protected $items = [];
+
+	public function getItems()
+	{
+		return $this->items;
+	}
+}
diff --git a/models/UserMenu.php b/models/UserMenu.php
new file mode 100644
index 00000000..0204322b
--- /dev/null
+++ b/models/UserMenu.php
@@ -0,0 +1,60 @@
+<?php
+/*****************************************************************************
+ * UserMenu.php
+ * Contains the user navigation logic.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
+ *****************************************************************************/
+
+class UserMenu extends Menu
+{
+	public function __construct()
+	{
+		$user = Registry::has('user') ? Registry::get('user') : new Guest();
+		if ($user->isLoggedIn())
+		{
+			$this->items[] = [
+				'label' => $user->getFirstName(),
+				'icon' => 'person-circle',
+				'subs' => [
+
+					[
+						'label' => 'Settings',
+						'uri' => '/accountsettings/',
+					],
+					[
+						'label' => 'Log out',
+						'uri' => '/logout/',
+					],
+				],
+			];
+		}
+		else
+		{
+			$this->items[] = [
+				'label' => 'Log in',
+				'icon' => 'person-circle',
+				'uri' => '/login/',
+			];
+		}
+
+		$this->items[] = [
+			'label' => 'Home',
+			'icon' => 'house-door',
+			'uri' => '/',
+		];
+
+		foreach ($this->items as $i => $item)
+		{
+			if (isset($item['uri']))
+				$this->items[$i]['url'] = BASEURL . $item['uri'];
+
+			if (!isset($item['subs']))
+				continue;
+
+			foreach ($item['subs'] as $j => $subitem)
+				$this->items[$i]['subs'][$j]['url'] = BASEURL . $subitem['uri'];
+		}
+	}
+}
diff --git a/public/css/admin.css b/public/css/admin.css
index 8dd510d9..0316b801 100644
--- a/public/css/admin.css
+++ b/public/css/admin.css
@@ -11,44 +11,6 @@
 	margin: 0 0 0.2em;
 }
 
-/* Admin bar styles
----------------------*/
-body {
-	padding-top: 30px;
-}
-#admin_bar {
-	background: #333;
-	color: #ccc;
-	left: 0;
-	position: fixed;
-	top: 0;
-	width: 100%;
-	z-index: 100;
-}
-#admin_bar ul {
-	list-style: none;
-	margin: 0 auto;
-	max-width: 1280px;
-	min-width: 900px;
-	padding: 2px;
-	width: 95%;
-}
-#admin_bar ul > li {
-	display: inline;
-	border-right: 1px solid #aaa;
-}
-#admin_bar ul > li:last-child {
-	border-right: none;
-}
-#admin_bar li > a {
-	color: inherit;
-	display: inline-block;
-	padding: 4px 6px;
-}
-#admin_bar li a:hover {
-	text-decoration: underline;
-}
-
 
 /* (Tag) autosuggest
 ----------------------*/
diff --git a/public/css/default.css b/public/css/default.css
index 450d7709..8cd08464 100644
--- a/public/css/default.css
+++ b/public/css/default.css
@@ -19,17 +19,13 @@ body {
 	background: #aaa 0 -50% fixed;
 }
 
-#wrapper, header {
+#wrapper, header .container {
 	width: 95%;
 	min-width: 900px;
 	max-width: 1280px;
 	margin: 0 auto;
 }
 
-header {
-	overflow: auto;
-}
-
 a {
 	color: #963626;
 	text-decoration: none;
@@ -67,27 +63,10 @@ a:hover h1#logo, a:hover h1#logo:before {
 
 /* Navigation
 ---------------*/
-ul#nav {
-	margin: 55px 10px 0 0;
-	padding: 0;
-	float: right;
-	list-style: none;
-}
-ul#nav li {
-	float: left;
-}
-ul#nav li a {
-	color: #fff;
-	display: block;
-	float: left;
-	font: 200 20px 'Press Start 2P', sans-serif;
-	margin: 0 0 0 32px;
-	padding: 10px 0;
-	text-decoration: none;
-	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
-}
-ul#nav li a:hover {
-	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
+.nav-divider {
+	height: 2.5rem;
+	border-left: .1rem solid rgba(255,255,255, 0.2);
+	margin: 0 0.5rem;
 }
 
 
diff --git a/templates/AdminBar.php b/templates/AdminBar.php
deleted file mode 100644
index daa81a8a..00000000
--- a/templates/AdminBar.php
+++ /dev/null
@@ -1,38 +0,0 @@
-<?php
-/*****************************************************************************
- * AdminBar.php
- * Defines the AdminBar class.
- *
- * Kabuki CMS (C) 2013-2015, Aaron van Geffen
- *****************************************************************************/
-
-class AdminBar extends Template
-{
-	private $extra_items = [];
-
-	public function html_main()
-	{
-		echo '
-			<div id="admin_bar">
-				<ul>
-					<li><a href="', BASEURL, '/managealbums/">Albums</a></li>
-					<li><a href="', BASEURL, '/manageassets/">Assets</a></li>
-					<li><a href="', BASEURL, '/managetags/">Tags</a></li>
-					<li><a href="', BASEURL, '/manageusers/">Users</a></li>
-					<li><a href="', BASEURL, '/manageerrors/">Errors [', ErrorLog::getCount(), ']</a></li>';
-
-		foreach ($this->extra_items as $item)
-			echo '
-					<li><a href="', $item[0], '">', $item[1], '</a></li>';
-
-		echo '
-					<li><a href="', BASEURL, '/logout/">Log out [', Registry::get('user')->getFullName(), ']</a></li>
-				</ul>
-			</div>';
-	}
-
-	public function appendItem($url, $caption)
-	{
-		$this->extra_items[] = [$url, $caption];
-	}
-}
diff --git a/templates/MainNavBar.php b/templates/MainNavBar.php
new file mode 100644
index 00000000..ded5fbb6
--- /dev/null
+++ b/templates/MainNavBar.php
@@ -0,0 +1,51 @@
+<?php
+/*****************************************************************************
+ * MainNavBar.php
+ * Contains the primary navigational menu template.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
+ *****************************************************************************/
+
+class MainNavBar extends NavBar
+{
+	protected $outerMenuId = 'mainNav';
+	protected $innerMenuId = 'mainNavigation';
+	protected $ariaLabel = 'Main navigation';
+	protected $navBarClasses = 'navbar-dark bg-dark sticky-top mb-4';
+	protected $primaryBadgeClasses = 'bg-light text-dark';
+	protected $secondaryBadgeClasses = 'bg-dark text-light';
+
+	public function html_main()
+	{
+		echo '
+		<nav id="', $this->outerMenuId, '" class="navbar navbar-expand-lg ', $this->navBarClasses, '" aria-label="', $this->ariaLabel, '">
+			<div class="container">
+				<a class="navbar-brand flex-grow-1" href="', BASEURL, '/">
+					HashRU Pics
+				</a>
+				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#', $this->innerMenuId, '" aria-controls="', $this->innerMenuId, '" aria-expanded="false" aria-label="Toggle navigation">
+					<span class="navbar-toggler-icon"></span>
+				</button>
+				<div class="collapse navbar-collapse justify-content-end" id="', $this->innerMenuId, '">
+					<ul class="navbar-nav mb-2 mb-lg-0">';
+
+		$mainMenu = new MainMenu();
+		$this->renderMenuItems($mainMenu->getItems());
+
+		echo '
+						<li class="nav-divider d-none d-lg-inline"></li>';
+
+		$adminMenu = new AdminMenu();
+		$this->renderMenuItems($adminMenu->getItems());
+
+		$userMenu = new UserMenu();
+		$this->renderMenuItems($userMenu->getItems());
+
+		echo '
+					</ul>
+				</div>
+			</div>
+		</nav>';
+	}
+}
diff --git a/templates/MainTemplate.php b/templates/MainTemplate.php
index b5224fbb..d23df69c 100644
--- a/templates/MainTemplate.php
+++ b/templates/MainTemplate.php
@@ -43,15 +43,12 @@ class MainTemplate extends Template
 		, $this->header_html, '
 	</head>
 	<body', !empty($this->classes) ? ' class="' . implode(' ', $this->classes) . '"' : '', '>
-		<header>
-			<a href="', BASEURL, '/">
-				<h1 id="logo">#pics</h1>
-			</a>
-			<ul id="nav">
-				<li><a href="', BASEURL, '/">albums</a></li>
-				<li><a href="', BASEURL, '/people/">people</a></li>
-				<li><a href="', BASEURL, '/timeline/">timeline</a></li>
-			</ul>
+		<header>';
+
+		$bar = new MainNavBar();
+		$bar->html_main();
+
+		echo '
 		</header>
 		<div id="wrapper">';
 
@@ -88,6 +85,7 @@ class MainTemplate extends Template
 				echo '<pre>', strtr($query, "\t", " "), '</pre>';
 
 		echo '
+		<script type="text/javascript" src="', BASEURL, '/vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 	</body>
 </html>';
 	}
diff --git a/templates/NavBar.php b/templates/NavBar.php
new file mode 100644
index 00000000..c625c609
--- /dev/null
+++ b/templates/NavBar.php
@@ -0,0 +1,62 @@
+<?php
+/*****************************************************************************
+ * NavBar.php
+ * Contains the navigational menu template.
+ *
+ * Global Data Lab code (C) Radboud University Nijmegen
+ * Programming (C) Aaron van Geffen, 2015-2022
+ *****************************************************************************/
+
+abstract class NavBar extends Template
+{
+	protected $primaryBadgeClasses = 'bg-dark text-light';
+	protected $secondaryBadgeClasses = 'bg-light text-dark';
+
+	public function renderMenu(array $items, $navBarClasses = '')
+	{
+		echo '
+					<ul class="navbar-nav ', $navBarClasses, '">';
+
+		$this->renderMenuItems($items, $navBarClasses);
+
+		echo '
+					</ul>';
+	}
+
+	public function renderMenuItems(array $items)
+	{
+		foreach ($items as $menuId => $item)
+		{
+			if (isset($item['icon']))
+				$item['label'] = '<i class="bi bi-' . $item['icon'] . '"></i> ' . $item['label'];
+
+			if (isset($item['badge']))
+				$item['label'] .= ' <span class="badge ' . $this->primaryBadgeClasses . '">' . $item['badge'] . '</span>';
+
+			if (empty($item['subs']))
+			{
+				echo '
+						<li class="nav-item"><a class="nav-link" href="', $item['url'], '">', $item['label'], '</a></li>';
+				continue;
+			}
+
+			echo '
+						<li class="nav-item dropdown">
+							<a class="nav-link dropdown-toggle" href="#" id="menu', $menuId, '" data-bs-toggle="dropdown" aria-expanded="false">', $item['label'], '</a>
+							<ul class="dropdown-menu" aria-labelledby="menu', $menuId, '">';
+
+			foreach ($item['subs'] as $subitem)
+			{
+				if (isset($subitem['badge']))
+					$subitem['label'] .= ' <span class="badge ' . $this->secondaryBadgeClasses . '">' . $subitem['badge'] . '</span>';
+
+				echo '
+								<li><a class="dropdown-item" href="', $subitem['url'], '">', $subitem['label'], '</a></li>';
+			}
+
+			echo '
+							</ul>
+						</li>';
+		}
+	}
+}