Components

Navigation

The menu in Neon contains shortcut links that guide our users toward the features that matter the most to them. This component helps reduce friction for our users while helping achieve them the most out value of our product

Horizontal Menu

Used primarily for main navigation in the Neon system

Created with Sketch. Forms Workflows Communications Reports Events Memberships Fundraising Accounts Dashboards
Created with Sketch. Forms Workflows Communications Reports Events Memberships Fundraising Accounts Dashboards 8 px 50px 50px 50px 50px 50px 50px 50px 50px 50px 
.menu-item-horizontal {
font-family: Lato-Regular;
font-size: 14px;
color: #002D41;
letter-spacing: 0;
text-align: center;
padding-bottom : 8px;
margin-right: 50px;


}

.more-icon {
font-family: "Font Awesome 5 Solid";
fa-ellipsis-v
}


.menu-item-horizontal: hover {
color: #0074D9;
border: 2px solid #0074D9;
}

Things to Know

  • Our users can modify the menu items that the use the most out of Neon. Anything represented here is used to frame the context for how the menu should function.

Vertical Menu

We use the Vertical Tabs layout for internal content management navigation, for example the account detail page.

Overview of CSS Classes

Selector
Summary
Parent Selector

.menu-item-horizontal

.menu-item-vertical

menu item from the horizontal navigation

menu item from the vertical navigation