Slide In Navigation

The ThemeKit Nav Slide widget creates a vertical list of links that slide in from the left or right when the action tab is clicked or tapped.
Action Tab
The menu tab has an active icon and a text label. It can ge positioned on the X and Y-axis relative to the top and left/right. It has cantrols for font size, color, background color and opacity and border radius.

Navigation Menu

The links have a background hover animation and the current page link can be displayed with a differrent background color. The link vertical spacing is adjustable.
When the number of links excedes the height of the browser or viewing device's viewport any overflow will scroll into view.

Flyout Navigation

The ThemeKit Nav Flyout widget has an action tab with a share icon which appears at the right or left at an adjustable percentage distance down from the top.
The flyout appears as a horizontal line of links.
The links are SVGs with a common icon color and the option for different background colors.
There are controls for icon padding, border radius and a checkbox to make them round.
To insert an SVG …

• Open the SVG icon download folder
• Select the icon
• Double click it to open it in TextEdit.app set in plain text mode …
• … or use a code editor
• Copy the code and paste it into the widget settings

SVGs

SVG icons should be used to replace all PNG icons and are more efficient and have better quality than font icons like FontAwesome.
Free Icons
There are 100s of icons in the folder which can be downloaded from the link in the "Read Me First" file in the widgets folder.
The social side menu also uses SVG icons.
SVG ixon code can be quickly copied and pasted using the freeware app CotEditor which can be download from the link below or from the Apple App Store.