diff --git a/bookwyrm/static/css/bookwyrm/components/_details.scss b/bookwyrm/static/css/bookwyrm/components/_details.scss
index 5708c9461..c9a0b33b8 100644
--- a/bookwyrm/static/css/bookwyrm/components/_details.scss
+++ b/bookwyrm/static/css/bookwyrm/components/_details.scss
@@ -114,3 +114,17 @@ details[open] summary .details-close {
         padding-bottom: 0.25rem;
     }
 }
+
+/** Navbar details
+ ******************************************************************************/
+
+#navbar-dropdown .navbar-item {
+    color: $text;
+    font-size: 0.875rem;
+    padding: 0.375rem 3rem 0.375rem 1rem;
+    white-space: nowrap;
+}
+
+#navbar-dropdown .navbar-item:hover {
+    background-color: $background-secondary;
+}
diff --git a/bookwyrm/templates/layout.html b/bookwyrm/templates/layout.html
index dadf42ab5..6b9e4daa1 100644
--- a/bookwyrm/templates/layout.html
+++ b/bookwyrm/templates/layout.html
@@ -90,64 +90,8 @@
 
             <div class="navbar-end">
             {% if request.user.is_authenticated %}
-                <div class="navbar-item mt-3 py-0 has-dropdown is-hoverable">
-                    <a
-                        href="{{ request.user.local_path }}"
-                        class="navbar-link pulldown-menu"
-                        role="button"
-                        aria-expanded="false"
-                        tabindex="0"
-                        aria-haspopup="true"
-                        aria-controls="navbar-dropdown"
-                    >
-                        {% include 'snippets/avatar.html' with user=request.user %}
-                        <span class="ml-2">{{ request.user.display_name }}</span>
-                    </a>
-                    <ul class="navbar-dropdown" id="navbar_dropdown">
-                        <li>
-                            <a href="{% url 'directory' %}" class="navbar-item">
-                                {% trans "Directory" %}
-                            </a>
-                        </li>
-                        <li>
-                            <a href="{% url 'user-shelves' request.user.localname %}" class="navbar-item">
-                                {% trans 'Your Books' %}
-                            </a>
-                        </li>
-                        <li>
-                            <a href="{% url 'direct-messages' %}" class="navbar-item">
-                                {% trans "Direct Messages" %}
-                            </a>
-                        </li>
-                        <li>
-                            <a href="{% url 'prefs-profile' %}" class="navbar-item">
-                                {% trans 'Settings' %}
-                            </a>
-                        </li>
-                        {% if perms.bookwyrm.create_invites or perms.moderate_user %}
-                        <li class="navbar-divider" role="presentation">&nbsp;</li>
-                        {% endif %}
-                        {% if perms.bookwyrm.create_invites and not site.allow_registration %}
-                        <li>
-                            <a href="{% url 'settings-invite-requests' %}" class="navbar-item">
-                                {% trans 'Invites' %}
-                            </a>
-                        </li>
-                        {% endif %}
-                        {% if perms.bookwyrm.moderate_user %}
-                        <li>
-                            <a href="{% url 'settings-dashboard' %}" class="navbar-item">
-                                {% trans 'Admin' %}
-                            </a>
-                        </li>
-                        {% endif %}
-                        <li class="navbar-divider" role="presentation">&nbsp;</li>
-                        <li>
-                            <a href="{% url 'logout' %}" class="navbar-item">
-                                {% trans 'Log out' %}
-                            </a>
-                        </li>
-                    </ul>
+                <div class="navbar-item mt-3 py-0">
+                    {% include 'user_menu.html' %}
                 </div>
                 <div class="navbar-item mt-3 py-0">
                     <a href="{% url 'notifications' %}" class="tags has-addons">
diff --git a/bookwyrm/templates/user_menu.html b/bookwyrm/templates/user_menu.html
new file mode 100644
index 000000000..03935de73
--- /dev/null
+++ b/bookwyrm/templates/user_menu.html
@@ -0,0 +1,73 @@
+{% load utilities %}
+{% load i18n %}
+
+<details class="dropdown" id="navbar-dropdown">
+    <summary
+        class="is-relative pulldown-menu dropdown-trigger"
+        aria-label="{% trans 'View profile and more' %}"
+        role="button"
+        aria-haspopup="menu"
+    >
+        <span class="">
+            {% include 'snippets/avatar.html' with user=request.user %}
+            <span class="ml-2">{{ request.user.display_name }}</span>
+        </span>
+        <span class="icon icon-arrow-down is-hidden-mobile" aria-hidden="true"></span>
+    </summary>
+
+    <div class="dropdown-menu">
+        <ul
+            class="dropdown-content"
+            role="menu"
+        >
+            <li role="menuitem">
+                <a href="{% url 'user-feed' user|username %}" class="navbar-item">
+                    {% trans "Profile" %}
+                </a>
+            </li>
+            <li role="menuitem">
+                <a href="{% url 'directory' %}" class="navbar-item">
+                    {% trans "Directory" %}
+                </a>
+            </li>
+            <li role="menuitem">
+                <a href="{% url 'user-shelves' request.user.localname %}" class="navbar-item">
+                    {% trans 'Your Books' %}
+                </a>
+            </li>
+            <li role="menuitem">
+                <a href="{% url 'direct-messages' %}" class="navbar-item">
+                    {% trans "Direct Messages" %}
+                </a>
+            </li>
+            <li role="menuitem">
+                <a href="{% url 'prefs-profile' %}" class="navbar-item">
+                    {% trans 'Settings' %}
+                </a>
+            </li>
+            {% if perms.bookwyrm.create_invites or perms.moderate_user %}
+            <li class="navbar-divider" role="presentation" aria-hidden="true"->&nbsp;</li>
+            {% endif %}
+            {% if perms.bookwyrm.create_invites and not site.allow_registration %}
+            <li role="menuitem">
+                <a href="{% url 'settings-invite-requests' %}" class="navbar-item">
+                    {% trans 'Invites' %}
+                </a>
+            </li>
+            {% endif %}
+            {% if perms.bookwyrm.moderate_user %}
+            <li role="menuitem">
+                <a href="{% url 'settings-dashboard' %}" class="navbar-item">
+                    {% trans 'Admin' %}
+                </a>
+            </li>
+            {% endif %}
+            <li class="navbar-divider" role="presentation" aria-hidden="true">&nbsp;</li>
+            <li role="menuitem">
+                <a href="{% url 'logout' %}" class="navbar-item">
+                    {% trans 'Log out' %}
+                </a>
+            </li>
+        </ul>
+    </div>
+</details>