diff --git a/.npmignore b/.npmignore
index 3d2a347..4aa2bfb 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,2 +1,6 @@
 docs/
-README.md
\ No newline at end of file
+README.md
+*.new
+*.bkp
+*.old.*
+*.old
\ No newline at end of file
diff --git a/README.md b/README.md
index 7004fc3..fc1a98d 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,7 @@ Import individual components.
 - `Grid` – component
 - `Row` – component
 - `Column` – component
+- `Checkbox` – component
 - `Input` – component
 - `Label` – component
 - `Form` – component
@@ -50,6 +51,7 @@ Mixins to import related components at once
 
 - `Grid` – `ui-grid`, `ui-row`, `ui-column`
 - `Form` – `ui-form`, `ui-field`
+- `Menu` – `ui-menu`, `ui-menu-item`, `ui-menu-header`, `ui-submenu`
 
 ```javascript
 import {Collections} from 'semantic-ui-vue2'
diff --git a/index.js b/index.js
index 3d6e33e..cb8a256 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,8 @@
+import Button from './src/elements/Button.vue'
+import ButtonGroup from './src/elements/button/Group.vue'
+import ButtonLabel from './src/elements/button/Label.vue'
+import ButtonOr from './src/elements/button/Or.vue'
+
 import Grid from './src/collections/Grid.vue'
 import Row from './src/collections/grid/Row.vue'
 import Column from './src/collections/grid/Column.vue'
@@ -9,6 +14,11 @@ import Label from './src/elements/Label.vue'
 import Form from './src/collections/Form.vue'
 import Field from './src/collections/form/Field.vue'
 
+import Menu from './src/collections/Menu.vue'
+import MenuItem from './src/collections/menu/Item.vue'
+import MenuHeader from './src/collections/menu/Header.vue'
+import Submenu from './src/collections/menu/Submenu.vue'
+
 import Modal from './src/modules/Modal.vue'
 
 import Mixin from './src/mixins'
@@ -17,6 +27,10 @@ import Collections from './src/mixins/collections.js'
 export {
     Mixin,
     Collections,
+    Button,
+    ButtonGroup,
+    ButtonLabel,
+    ButtonOr,
     Grid,
     Row,
     Column,
diff --git a/package.json b/package.json
index 8d57bb2..2af6641 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "semantic-ui-vue2",
-  "version": "2.2.1",
+  "version": "2.3.2",
   "description": "Semantic UI Integration for Vue 2",
   "main": "index.js",
   "scripts": {
diff --git a/src/collections/Menu.vue b/src/collections/Menu.vue
new file mode 100644
index 0000000..20f0480
--- /dev/null
+++ b/src/collections/Menu.vue
@@ -0,0 +1,55 @@
+<template lang="html">
+    <div v-bind:class="[
+        'ui',
+        'menu',
+        getWidthsClasses('item'),
+        {secondary},
+        {pointing},
+        {tabular},
+        {text},
+        {vertical},
+        {pagination},
+        getFixedClasses(),
+        {stackable},
+        {inverted},
+        getColorClass(),
+        {fluid},
+        {compact},
+        getAttachedClasses(),
+        {size},
+        {fitted},
+        {borderless}]">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    import Widths from '../mixins/commons/widths'
+    import Secondary from '../mixins/commons/secondary'
+    import Pointing from '../mixins/commons/pointing'
+    import Tabular from '../mixins/commons/tabular'
+    import Text from '../mixins/commons/text'
+    import Vertical from '../mixins/commons/vertical'
+    import As from '../mixins/commons/as'
+    import Fixed from '../mixins/commons/fixed'
+    import Stackable from '../mixins/commons/stackable'
+    import Inverted from '../mixins/commons/inverted'
+    import Color from '../mixins/commons/color'
+    import Fluid from '../mixins/commons/fluid'
+    import Compact from '../mixins/commons/compact'
+    import Attached from '../mixins/commons/attached'
+    import Size from '../mixins/commons/size'
+    import Fitted from '../mixins/commons/fitted'
+    import Borderless from '../mixins/commons/borderless'
+
+    export default {
+        mixins: [Widths, Secondary, Pointing, Tabular, Text, Vertical, As, Fixed, Stackable, Inverted, Color, Fluid, Compact, Attached, Size, Fitted, Borderless],
+        props: {
+            pagination: {
+                type: Boolean,
+                required: false,
+                default: false,
+            }
+        }
+    }
+</script>
diff --git a/src/collections/menu/Header.vue b/src/collections/menu/Header.vue
new file mode 100644
index 0000000..e7133aa
--- /dev/null
+++ b/src/collections/menu/Header.vue
@@ -0,0 +1,20 @@
+<template lang="html">
+    <div v-bind:class="['header', {item}]">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    import As from '../../mixins/commons/as'
+
+    export default {
+        mixins: [As],
+        props: {
+            item: {
+                type: Boolean,
+                required: false,
+                default: false,
+            }
+        }
+    }
+</script>
diff --git a/src/collections/menu/Item.vue b/src/collections/menu/Item.vue
new file mode 100644
index 0000000..91674ef
--- /dev/null
+++ b/src/collections/menu/Item.vue
@@ -0,0 +1,26 @@
+<template lang="html">
+    <component :is="getComponentType()" v-bind:class="['item', {active}, {link}, {fitted}, {borderless}, getColorClass(), {right}, {header}]">
+        <slot></slot>
+    </component>
+</template>
+
+<script>
+    import Active from '../../mixins/commons/active'
+    import Link from '../../mixins/commons/link'
+    import As from '../../mixins/commons/as'
+    import Fitted from '../../mixins/commons/fitted'
+    import Borderless from '../../mixins/commons/borderless'
+    import Color from '../../mixins/commons/color'
+    import Right from '../../mixins/commons/right'
+
+    export default {
+        mixins: [Active, As, Link, Fitted, Borderless, Color, Right],
+        props: {
+            header: {
+                type: Boolean,
+                required: false,
+                default: false,
+            }
+        }
+    }
+</script>
diff --git a/src/collections/menu/Submenu.vue b/src/collections/menu/Submenu.vue
new file mode 100644
index 0000000..f5a42ad
--- /dev/null
+++ b/src/collections/menu/Submenu.vue
@@ -0,0 +1,15 @@
+<template lang="html">
+    <component :is="getComponentType()" v-bind:class="['menu', getColorClass(), {right}]">
+        <slot></slot>
+    </component>
+</template>
+
+<script>
+    import As from '../../mixins/commons/as'
+    import Color from '../../mixins/commons/color'
+    import Right from '../../mixins/commons/right'
+
+    export default {
+        mixins: [As, Color, Right]
+    }
+</script>
diff --git a/src/elements/Button.vue b/src/elements/Button.vue
new file mode 100644
index 0000000..58cad2a
--- /dev/null
+++ b/src/elements/Button.vue
@@ -0,0 +1,41 @@
+<template>
+    <component :is="getComponentType('button')" :class="['ui', 'button', {primary}, {secondary}, {animated}, getLabeledClasses(), getColorClass(), getIconClasses(), {basic}, {positive}, {negative}, {inverted}, {active}, {disabled}, {loading}, size, getFloatClasses(), {compact}, {fluid}, {circular}]"
+        v-on:mouseenter="emitMouseEnter"
+        v-on:mouseover="emitMouseOver"
+        v-on:mousemove="emitMouseMove"
+        v-on:mousedown="emitMouseDown"
+        v-on:mouseup="emitMouseUp"
+        v-on:click="emitClick"
+        v-on:mouseleave="emitMouseLeave"
+        v-on:mouseout="emitMouseOut"
+    >
+        <slot></slot>
+    </component>
+</template>
+
+<script>
+    import MouseEvents from '../mixins/commons/events/mouse'
+    import Primary from '../mixins/commons/primary'
+    import Secondary from '../mixins/commons/secondary'
+    import Animated from '../mixins/commons/animated'
+    import As from '../mixins/commons/as'
+    import Labeled from '../mixins/commons/labeled'
+    import Color from '../mixins/commons/color'
+    import Icon from '../mixins/commons/icon'
+    import Basic from '../mixins/commons/basic'
+    import Positive from '../mixins/commons/positive'
+    import Negative from '../mixins/commons/negative'
+    import Inverted from '../mixins/commons/inverted'
+    import Active from '../mixins/commons/active'
+    import Disabled from '../mixins/commons/disabled'
+    import Loading from '../mixins/commons/loading'
+    import Size from '../mixins/commons/size'
+    import Float from '../mixins/commons/float'
+    import Compact from '../mixins/commons/compact'
+    import Fluid from '../mixins/commons/fluid'
+    import Circular from '../mixins/commons/circular'
+
+    export default {
+        mixins: [MouseEvents, Primary, Secondary, Animated, As, Labeled, Color, Icon, Basic, Positive, Negative, Inverted, Active, Disabled, Loading, Size, Float, Compact, Fluid, Circular]
+    }
+</script>
diff --git a/src/elements/Checkbox.vue b/src/elements/Checkbox.vue
index 9a6938e..adca0d1 100644
--- a/src/elements/Checkbox.vue
+++ b/src/elements/Checkbox.vue
@@ -59,7 +59,7 @@
             v-on:submit="emitSubmit"
             ref="input" />
             <label v-bind:for="id">
-                <slot>{{ label }}</slot>                
+                <slot>{{ label }}</slot>
                 <span v-show="inputValue">
                     &emsp;
                     <span class="ui small blue label">{{ inputValue }}</span>
@@ -162,7 +162,7 @@
                     return this.value == this.$vnode.data.attrs.value;
                 }
 
-                if (this.value !== true && this.value !== false) {
+                if (typeof this.value != 'undefined' && this.value !== true && this.value !== false) {
                     return this.value == this.trueVal
                 }
 
@@ -221,9 +221,6 @@
                 return this.$vnode.data.attrs.value && Array.isArray(this.value)
             },
         },
-        created() {
-            console.log(this.value)
-        },
     }
 </script>
 
diff --git a/src/elements/Input.vue b/src/elements/Input.vue
index 9a751ca..3f79870 100644
--- a/src/elements/Input.vue
+++ b/src/elements/Input.vue
@@ -67,6 +67,7 @@
 </template>
 
 <script>
+import Constants from '../mixins/commons/constants.js'
 import Input from '../mixins/commons/input.js'
 import Focus from '../mixins/commons/states/focus.js'
 import Loading from '../mixins/commons/states/loading.js'
@@ -117,7 +118,7 @@ export default {
     methods: {
         getIconClasses() {
             if (this.dIcon.value) {
-                return (this.dIcon.position == 'right' ? 'icon' : this.dIcon.position + ' icon')
+                return (this.dIcon.position == Constants.right ? Constants.icon : this.dIcon.position + ' ' + Constants.icon)
             }
 
             return false
diff --git a/src/elements/button/Group.vue b/src/elements/button/Group.vue
new file mode 100644
index 0000000..06f22da
--- /dev/null
+++ b/src/elements/button/Group.vue
@@ -0,0 +1,18 @@
+<template>
+    <div :class="['ui', 'buttons', getIconClasses(), {vertical}, getLabeledClasses(), getWidthsClasses(), getColorClass(), {basic}]">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    import Icon from '../../mixins/commons/icon'
+    import Vertical from '../../mixins/commons/vertical'
+    import Labeled from '../../mixins/commons/labeled'
+    import Widths from '../../mixins/commons/widths'
+    import Color from '../../mixins/commons/color'
+    import Basic from '../../mixins/commons/basic'
+
+    export default {
+        mixins: [Icon, Vertical, Labeled, Widths, Color, Basic]
+    }
+</script>
diff --git a/src/elements/button/Label.vue b/src/elements/button/Label.vue
new file mode 100644
index 0000000..6935d26
--- /dev/null
+++ b/src/elements/button/Label.vue
@@ -0,0 +1,26 @@
+<template>
+    <component :is="getComponentType('a')" :class="['ui', 'basic', 'label', {right}, {pointing}, getColorClass()]"
+               v-on:mouseenter="emitMouseEnter"
+               v-on:mouseover="emitMouseOver"
+               v-on:mousemove="emitMouseMove"
+               v-on:mousedown="emitMouseDown"
+               v-on:mouseup="emitMouseUp"
+               v-on:click="emitClick"
+               v-on:mouseleave="emitMouseLeave"
+               v-on:mouseout="emitMouseOut"
+    >
+        <slot></slot>
+    </component>
+</template>
+
+<script>
+    import MouseEvents from '../../mixins/commons/events/mouse'
+    import As from '../../mixins/commons/as'
+    import Pointing from '../../mixins/commons/pointing'
+    import Right from '../../mixins/commons/right'
+    import Color from '../../mixins/commons/color'
+
+    export default {
+        mixins: [MouseEvents, As, Pointing, Right, Color]
+    }
+</script>
diff --git a/src/elements/button/Or.vue b/src/elements/button/Or.vue
new file mode 100644
index 0000000..235ca92
--- /dev/null
+++ b/src/elements/button/Or.vue
@@ -0,0 +1,15 @@
+<template>
+    <div class="or" :data-text="this.text"></div>
+</template>
+
+<script>
+    export default {
+        props: {
+            text: {
+                Type: String,
+                required: false,
+                default: 'or'
+            }
+        }
+    }
+</script>
diff --git a/src/mixins/collections.js b/src/mixins/collections.js
index 20122f1..edfe10e 100644
--- a/src/mixins/collections.js
+++ b/src/mixins/collections.js
@@ -1,7 +1,9 @@
 import Grid from './grid.js'
 import Form from './form.js'
+import Menu from './menu'
 
 export default {
     Grid,
     Form,
+    Menu,
 }
diff --git a/src/mixins/commons/active.js b/src/mixins/commons/active.js
new file mode 100644
index 0000000..b87014d
--- /dev/null
+++ b/src/mixins/commons/active.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        active: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/animated.js b/src/mixins/commons/animated.js
new file mode 100644
index 0000000..eaa5327
--- /dev/null
+++ b/src/mixins/commons/animated.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        animated: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/as.js b/src/mixins/commons/as.js
new file mode 100644
index 0000000..c45f298
--- /dev/null
+++ b/src/mixins/commons/as.js
@@ -0,0 +1,20 @@
+export default {
+    props: {
+        as: {
+            type: String,
+            required: false,
+        },
+    },
+    methods: {
+        getSemanticColumns(value) {
+            if (typeof value === 'undefined') {
+                return columns;
+            }
+
+            return columns[value - 1];
+        },
+        getComponentType(defaultType = 'div') {
+            return this.as? this.as : defaultType;
+        }
+    },
+}
diff --git a/src/mixins/commons/attached.js b/src/mixins/commons/attached.js
new file mode 100644
index 0000000..f9b7bc1
--- /dev/null
+++ b/src/mixins/commons/attached.js
@@ -0,0 +1,32 @@
+import Constants from './constants.js';
+
+const enums = [
+    Constants.top,
+    Constants.bottom,
+    Constants.left,
+    Constants.right
+];
+
+export default {
+    props: {
+        attached: {
+            type: [Boolean, String],
+            required: false,
+            default: false,
+            validator(value) {
+                if (typeof value == 'boolean') {
+                    return true;
+                }
+                return enums.indexOf(value) > -1;
+            },
+        }
+    },
+    methods: {
+        getAttachedClasses() {
+            if (this.attached === true) {
+                return Constants.attached;
+            }
+            return this.attached ? [this.attached, Constants.attached].join(' ') : false;
+        },
+    },
+}
diff --git a/src/mixins/commons/basic.js b/src/mixins/commons/basic.js
new file mode 100644
index 0000000..7740a86
--- /dev/null
+++ b/src/mixins/commons/basic.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        basic: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/borderless.js b/src/mixins/commons/borderless.js
new file mode 100644
index 0000000..3286f7a
--- /dev/null
+++ b/src/mixins/commons/borderless.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        borderless: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/circular.js b/src/mixins/commons/circular.js
new file mode 100644
index 0000000..8bb2d32
--- /dev/null
+++ b/src/mixins/commons/circular.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        circular: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/color.js b/src/mixins/commons/color.js
new file mode 100644
index 0000000..3c4458f
--- /dev/null
+++ b/src/mixins/commons/color.js
@@ -0,0 +1,33 @@
+import Constants from './constants.js';
+
+const enums = [
+    Constants.red,
+    Constants.orange,
+    Constants.yellow,
+    Constants.olive,
+    Constants.green,
+    Constants.teal,
+    Constants.blue,
+    Constants.violet,
+    Constants.purple,
+    Constants.pink,
+    Constants.brown,
+    Constants.grey,
+    Constants.black,
+];
+
+export default {
+    props: {
+        color: {
+            type: String,
+            validator(value) {
+                return enums.indexOf(value) > -1;
+            },
+        }
+    },
+    methods: {
+        getColorClass() {
+            return this.color ? this.color : false;
+        },
+    },
+}
diff --git a/src/mixins/commons/compact.js b/src/mixins/commons/compact.js
new file mode 100644
index 0000000..0df0272
--- /dev/null
+++ b/src/mixins/commons/compact.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        compact: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/constants.js b/src/mixins/commons/constants.js
index abb8112..584f8f7 100644
--- a/src/mixins/commons/constants.js
+++ b/src/mixins/commons/constants.js
@@ -2,6 +2,7 @@ export default {
     active: 'active',
     aligned: 'aligned',
     animating: 'animating',
+    attached: 'attached',
     basic: 'basic',
     big: 'big',
     blurring: 'blurring',
@@ -18,6 +19,7 @@ export default {
     fade: 'fade',
     fifteen: 'fifteen',
     five: 'five',
+    fixed: 'fixed',
     flip: 'flip',
     floated: 'floated',
     four: 'four',
@@ -28,10 +30,12 @@ export default {
     icon: 'icon',
     in: 'in',
     inverted: 'inverted',
+    labeled: 'labeled',
     large: 'large',
     left: 'left',
     massive: 'massive',
     medium: 'medium',
+    menu: 'menu',
     mini: 'mini',
     mobile: 'mobile',
     modal: 'modal',
@@ -69,4 +73,17 @@ export default {
     centered: 'centered',
     middle: 'middle',
     top: 'top',
-}
\ No newline at end of file
+    red: 'red',
+    orange: 'orange',
+    yellow: 'yellow',
+    olive: 'olive',
+    green: 'green',
+    teal: 'teal',
+    blue: 'blue',
+    violet: 'violet',
+    purple: 'purple',
+    pink: 'pink',
+    brown: 'brown',
+    grey: 'grey',
+    black: 'black'
+}
diff --git a/src/mixins/commons/disabled.js b/src/mixins/commons/disabled.js
new file mode 100644
index 0000000..0bdc17a
--- /dev/null
+++ b/src/mixins/commons/disabled.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        disabled: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/fitted.js b/src/mixins/commons/fitted.js
new file mode 100644
index 0000000..81bc493
--- /dev/null
+++ b/src/mixins/commons/fitted.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        fitted: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/fixed.js b/src/mixins/commons/fixed.js
new file mode 100644
index 0000000..ce63bb3
--- /dev/null
+++ b/src/mixins/commons/fixed.js
@@ -0,0 +1,24 @@
+import Constants from './constants.js';
+
+const enums = [
+    Constants.top,
+    Constants.bottom,
+    Constants.left,
+    Constants.right
+];
+
+export default {
+    props: {
+        fixed: {
+            type: String,
+            validator(value) {
+                return enums.indexOf(value) > -1;
+            },
+        }
+    },
+    methods: {
+        getFixedClasses() {
+            return this.fixed ? [this.fixed, Constants.fixed].join(' ') : false;
+        },
+    },
+}
diff --git a/src/mixins/commons/fluid.js b/src/mixins/commons/fluid.js
new file mode 100644
index 0000000..3099b2b
--- /dev/null
+++ b/src/mixins/commons/fluid.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        fluid: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/icon.js b/src/mixins/commons/icon.js
index 9f948cb..a380fc9 100644
--- a/src/mixins/commons/icon.js
+++ b/src/mixins/commons/icon.js
@@ -3,7 +3,7 @@ import Constants from './constants.js';
 export default {
     props: {
         icon: {
-            type: String,
+            type: [String, Boolean],
             required: false,
             // default: false
         },
diff --git a/src/mixins/commons/labeled.js b/src/mixins/commons/labeled.js
new file mode 100644
index 0000000..ebe20fa
--- /dev/null
+++ b/src/mixins/commons/labeled.js
@@ -0,0 +1,30 @@
+import Constants from './constants.js';
+
+const enums = [
+    Constants.left,
+    Constants.right
+];
+
+export default {
+    props: {
+        labeled: {
+            type: [Boolean, String],
+            required: false,
+            default: false,
+            validator(value) {
+                if (typeof value == 'boolean') {
+                    return true;
+                }
+                return enums.indexOf(value) > -1;
+            },
+        }
+    },
+    methods: {
+        getLabeledClasses() {
+            if (this.labeled === true) {
+                return Constants.labeled;
+            }
+            return this.labeled ? [this.labeled, Constants.labeled].join(' ') : false;
+        },
+    },
+}
diff --git a/src/mixins/commons/link.js b/src/mixins/commons/link.js
new file mode 100644
index 0000000..c1d9e82
--- /dev/null
+++ b/src/mixins/commons/link.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        link: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/loading.js b/src/mixins/commons/loading.js
new file mode 100644
index 0000000..3bc9984
--- /dev/null
+++ b/src/mixins/commons/loading.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        loading: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/negative.js b/src/mixins/commons/negative.js
new file mode 100644
index 0000000..1ff12cf
--- /dev/null
+++ b/src/mixins/commons/negative.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        negative: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/pointing.js b/src/mixins/commons/pointing.js
new file mode 100644
index 0000000..2d28705
--- /dev/null
+++ b/src/mixins/commons/pointing.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        pointing: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/positive.js b/src/mixins/commons/positive.js
new file mode 100644
index 0000000..6cd52ca
--- /dev/null
+++ b/src/mixins/commons/positive.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        positive: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/primary.js b/src/mixins/commons/primary.js
new file mode 100644
index 0000000..a478658
--- /dev/null
+++ b/src/mixins/commons/primary.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        primary: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/right.js b/src/mixins/commons/right.js
new file mode 100644
index 0000000..c4d1479
--- /dev/null
+++ b/src/mixins/commons/right.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        right: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/secondary.js b/src/mixins/commons/secondary.js
new file mode 100644
index 0000000..d28b4f8
--- /dev/null
+++ b/src/mixins/commons/secondary.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        secondary: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/size.js b/src/mixins/commons/size.js
new file mode 100644
index 0000000..11d6b69
--- /dev/null
+++ b/src/mixins/commons/size.js
@@ -0,0 +1,21 @@
+import Constants from './constants.js';
+
+const enums = [
+    Constants.mini,
+    Constants.tiny,
+    Constants.small,
+    Constants.large,
+    Constants.huge,
+    Constants.massive,
+];
+
+export default {
+    props: {
+        size: {
+            type: String,
+            validator(value) {
+                return enums.indexOf(value) > -1;
+            },
+        }
+    }
+}
diff --git a/src/mixins/commons/stackable.js b/src/mixins/commons/stackable.js
new file mode 100644
index 0000000..8626a06
--- /dev/null
+++ b/src/mixins/commons/stackable.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        stackable: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/tabular.js b/src/mixins/commons/tabular.js
new file mode 100644
index 0000000..02c9ce7
--- /dev/null
+++ b/src/mixins/commons/tabular.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        tabular: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/text.js b/src/mixins/commons/text.js
new file mode 100644
index 0000000..05cdb96
--- /dev/null
+++ b/src/mixins/commons/text.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        text: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/vertical.js b/src/mixins/commons/vertical.js
new file mode 100644
index 0000000..271ec15
--- /dev/null
+++ b/src/mixins/commons/vertical.js
@@ -0,0 +1,9 @@
+export default {
+    props: {
+        vertical: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    }
+}
diff --git a/src/mixins/commons/widths.js b/src/mixins/commons/widths.js
new file mode 100644
index 0000000..a2d1ee1
--- /dev/null
+++ b/src/mixins/commons/widths.js
@@ -0,0 +1,56 @@
+import Constants from './constants.js';
+
+const columns = [
+    Constants.one,
+    Constants.two,
+    Constants.three,
+    Constants.four,
+    Constants.five,
+    Constants.six,
+    Constants.seven,
+    Constants.eight,
+    Constants.nine,
+    Constants.ten,
+    Constants.eleven,
+    Constants.twelve,
+    Constants.thirteen,
+    Constants.fourteen,
+    Constants.fifteen,
+    Constants.sixteen,
+];
+
+export default {
+    props: {
+        widths: {
+            type: [String, Number],
+            required: false,
+            validator(value) {
+                return (value > 0 && value < 17) || columns.indexOf(value) > -1;
+            }
+        },
+    },
+    methods: {
+        getSemanticColumns(value) {
+            if (typeof value === 'undefined') {
+                return columns;
+            }
+
+            return columns[value - 1];
+        },
+        getWidthsClasses(type) {
+            if (typeof this.widths === 'undefined') {
+                return '';
+            }
+
+            var classes = [type];
+
+            if (isNaN(this.widths)) {
+                classes.unshift(this.widths);
+            } else {
+                classes.unshift(this.getSemanticColumns(this.widths));
+            }
+
+            return classes;
+        },
+    },
+}
diff --git a/src/mixins/index.js b/src/mixins/index.js
index 3d85df7..9555ab8 100644
--- a/src/mixins/index.js
+++ b/src/mixins/index.js
@@ -1,5 +1,11 @@
 import Grid from './grid.js'
 import Form from './form.js'
+import Menu from './menu.js'
+
+import Button from '../elements/Button.vue'
+import ButtonLabel from '../elements/button/Label.vue'
+import ButtonGroup from '../elements/button/Group.vue'
+import ButtonOr from '../elements/button/Or.vue'
 
 import Input from '../elements/Input.vue'
 import Label from '../elements/Label.vue'
@@ -10,8 +16,13 @@ export default {
     mixins: [
         Grid,
         Form,
+        Menu,
     ],
     components: {
+        'ui-button': Button,
+        'ui-button-label': ButtonLabel,
+        'ui-button-group': ButtonGroup,
+        'ui-button-or': ButtonOr,
         'ui-input': Input,
         'ui-label': Label,
         'ui-modal': Modal,
diff --git a/src/mixins/menu.js b/src/mixins/menu.js
new file mode 100644
index 0000000..4bc6607
--- /dev/null
+++ b/src/mixins/menu.js
@@ -0,0 +1,13 @@
+import Menu from '../collections/Menu.vue'
+import MenuItem from '../collections/menu/Item.vue'
+import MenuHeader from '../collections/menu/Header.vue'
+import Submenu from '../collections/menu/Submenu.vue'
+
+export default {
+    components: {
+        'ui-menu': Menu,
+        'ui-menu-item': MenuItem,
+        'ui-menu-header': MenuHeader,
+        'ui-submenu': Submenu,
+    }
+}