Link Drawer Tutorial
Start Collapsed (checkbox)
This check box will determine whether or not the drawer is collapsed or open when the page loads
Fixed means that the drawer will stick to the top/bottom of the page, and follow the user as they scroll. Once this option is selected, you will see a new dropdown appear for select the orientation (top/bottom) of the drawer.
When this option is selected you will also see some display options such as:
- On Scroll (Appears on the page when scrolled to)
- On Scroll Past (Appears on the page when scrolled to and hides again when scrolled above)
Inline means that the drawer will sit with the content wherever you place it on the stacks page, it will not follow the user as they scroll.
The index determines the 3D position of the drawer. If you find that the drawer is being hidden behind other stacks, increase this value.
NOTE: You do not have to worry about setting individual z-indexs for multiple Link Drawers, this is already handled automagically ^_^
This determines the maximum width for the drawer
Here you can set the Tablet, and Mobile Breakpoints for the stack. The number of columns and other responsive options, will change at these specific points. All default values apply to desktop sizes.
Here you can set the number of columns for the item grid. A separate number of columns can be set for Desktop, Tablet, and Mobile.
Font Family (Dropdown)
This dropdown allows you to choose the font for Link Drawer
This is used to set spacing around the outside of the Link Drawer, It comes in handy when the browser shrinks, but you don’t want the sides of the drawer to touch the edge of the page.
Determines the roundness of the corners of the drawer and the toggle button.
Border Weight & Color
You can add a border to the drawer by setting a weight, and adjusting the color. For no border, simply set the weight to 0.
Shadow (ON or OFF)
You will see the option to toggle the shadow on or off. Once turned on you will find inputs for adjusting the shadow of the stack.
Background (Off, Color, Gradient, Image)
You can choose between 4 options for the Drawer background:
- Off (No background)
- Color (One single Color)
- Gradient (Two colors, and options for gradient direction)
- Image (A custom background image of your choice)
Icon Size (Desktop, Tablet, Mobile)
Here you can set the size for icons of the Link Items in the Drawer, You will see 3 inputs, one for Desktop, Tablet, and Mobile
Text Size (Desktop, Tablet, Mobile)
Here you can set the size for the text of Link Items in the Drawer, You will see 3 inputs, one for Desktop, Tablet, and Mobile
Icon Color (Initial & Hover)
Here you can set the color of the Icons, for both the initial state and hover state
Text Color (Initial & Hover)
Here you can set the color of the Text, for both the initial state and hover state
Backgorund Color (Initial & Hover)
Here you can set the background color for the Link Items. You will see options for the initial background and the hover background
Border Color (Initial & Hover)
Each item has a 1px solid border around it, which is set to opacity 0 by default. If you want to apply a border to the initial or hover state, change these colors and increase the opacity to what you desire.
This determines the amount of space inbetween all of the link items
The determines the amount of spacing between the icons and the text in the link items.
Here you can set the vertical and horizontal padding for each item.
Determines the corner roundness for the Link Items.
Hide Icon (checkbox)
If this option is checked, then the icon for the toggle will be hidden and only text will appear. Useful for button like toggles.
Fill Mode (Full or Pixel)
- Full (The toggle extends the full width of the stacks max-width)
- Pixel (Allows you to set a custom pixel width for the toggle)
If the toggle is set to a Pixel width, then a dropdown menu will appear to set the horizontal alignment of the toggle. You can set it to:
This input determines the height (size) of the menu toggle
Text (Open and Close text)
Here you can set the actual text content for the toggle in it’s open and closed states
Icon Size (Open & Close icons)
This allows you to set the size for the open and close icons
Background (Initial & Hover)
Here you can set the initial background color and the hover background color for the toggle
Icon / Text
Here you can set the color of the icon and text of the toggle button, for both the Initial and Hover states.