From 431bf7baade23c92f9943bfe8aa8a77dbf9bc955 Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Fri, 21 Jun 2019 21:11:52 +0900
Subject: [PATCH] Add support for <button>

---
 pages/css/components/navigation.md | 2 +-
 src/navigation/sidenav.scss        | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/pages/css/components/navigation.md b/pages/css/components/navigation.md
index 5ee46c8a..e6c9b43d 100644
--- a/pages/css/components/navigation.md
+++ b/pages/css/components/navigation.md
@@ -172,7 +172,7 @@ Use `.UnderlineNav--full` in combination with container styles and `.UnderlineNa
 The Side Nav is a vertical list of navigational links, typically used on the left side of a page. **Width and placement must be set by you.** For example by using our grid columns or by applying an inline `width`.
 
 - You can use a **light gray background** and a **border** if the parent element doesn't have it already.
-- To add a "selected" state add `aria-current="page"`.
+- To add a "selected" state use `aria-current="page"`. If it should act more like a "tab menu" with button elements, use `aria-selected="true"` instead.
 
 ```html
 <nav class="SideNav bg-gray-light border" style="max-width: 360px">
diff --git a/src/navigation/sidenav.scss b/src/navigation/sidenav.scss
index d8c213ab..c4374f22 100644
--- a/src/navigation/sidenav.scss
+++ b/src/navigation/sidenav.scss
@@ -5,8 +5,12 @@
 .SideNav-item {
   position: relative;
   display: block;
+  width: 100%;
   padding: $spacer-2+$spacer-1 $spacer-3;
   color: $text-gray;
+  text-align: left;
+  background-color: transparent;
+  border: 0;
 
   & + & {
     border-top: $border;